He estado investigando sobre las consultas de medios y todavía no entiendo muy bien cómo orientar los dispositivos de ciertos tamaños.
Quiero ser capaz de orientar el escritorio, la tableta y el móvil. Sé que habrá algunas discrepancias, pero sería bueno tener un sistema genérico que se puede utilizar para orientar estos dispositivos.
Algunos ejemplos que he encontrado:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
O:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
¿Cuáles crees que deberían ser estos 'puntos de interrupción' para cada dispositivo?
En mi opinión, estos son los mejores puntos de ruptura:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edición: Refinado para que funcione mejor con las cuadrículas de 960:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
En la práctica, muchos diseñadores convierten los píxeles en ems, en gran parte porque los ems permiten un mejor zoom. Con el zoom estándar 1em === 16px
. Multiplique los píxeles por 1em/16px
para obtener ems. Por ejemplo, 320px === 20em
.
En respuesta al comentario, min-width
es un estándar en el diseño "mobile-first", en el que se empieza diseñando para las pantallas más pequeñas, y luego se añaden consultas de medios cada vez mayores, trabajando en pantallas cada vez más grandes. Independientemente de si prefieres min-
, max-
o una combinación de ellas, ten en cuenta el orden de las reglas, ya que si varias reglas coinciden con el mismo elemento, las últimas anularán las primeras.
Si quieres apuntar a un dispositivo, sólo tienes que escribir min-device-width
. Por ejemplo:
@media only screen and (min-device-width: 480px){}
@media only screen and (min-device-width: 768px){}
Aquí hay algunos buenos artículos:
He utilizado este sitio para encontrar la resolución y desarrollado CSS por números reales. Mis números varían bastante de las respuestas anteriores, excepto que mi CSS realmente llega a los dispositivos deseados.
Además, tenga esta pieza de código de depuración justo después de su consulta de medios por ejemplo
@media only screen and (min-width: 769px) and (max-width: 1281px) {
/* para pantallas de tabletas de 10 pulgadas */
body::before {
contenido: "tableta a algunos medios de comunicación de escritorio consulta (769 > 1281) disparó";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* Amarillo semitransparente */
posición: absoluta;
top: 0;
izquierda: 0;
right: 0;
z-index: 99;
}
}
Añade este elemento de depuración en cada una de las consultas de medios y verás qué consulta se está aplicando.