¿Cuál es la diferencia entre "pantalla" y "sólo pantalla" en las consultas de medios?
¿ Cuál es la diferencia entre screeny only screenen las consultas de medios?
<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
¿Por qué estamos obligados a utilizar only screen? ¿ No screenproporciona en sí suficiente información para mostrarla solo en la pantalla?
He visto muchos sitios web responsivos que utilizan cualquiera de estas tres formas diferentes:
@media screen and (max-width:632px)
@media (max-width:632px)
@media only screen and (max-width:632px)
Analicemos sus ejemplos uno por uno.
@media (max-width:632px)
Esto dice que para una ventana con un max-widthtamaño de 632 px desea aplicar estos estilos. Con ese tamaño, en la mayoría de los casos estaríamos hablando de algo más pequeño que una pantalla de escritorio.
@media screen and (max-width:632px)
Esto dice que para un dispositivo con una screenventana max-widthde 632px aplique el estilo. Esto es casi idéntico a lo anterior excepto que usted especifica, screena diferencia de los otros tipos de medios disponibles, el otro más común es print.
@media only screen and (max-width:632px)
Aquí hay una cita directa del W3C para explicar esto.
La palabra clave 'sólo' también se puede utilizar para ocultar hojas de estilo de agentes de usuario más antiguos. Los agentes de usuario deben procesar consultas de medios que comiencen con "solo" como si la palabra clave "solo" no estuviera presente.
Como no existe un tipo de medio como "únicamente", los navegadores más antiguos deben ignorar la hoja de estilo.
Aquí está el enlace a esa cita que se muestra en el ejemplo 9 de esa página.
Esperemos que esto arroje algo de luz sobre las consultas de los medios.
EDITAR:
Asegúrese de consultar la excelente respuesta de @hybrids sobre cómo onlyse maneja realmente la palabra clave.
Lo siguiente es de Adobe Docs .
La especificación de consultas de medios también proporciona la palabra clave only, cuyo objetivo es ocultar las consultas de medios de los navegadores más antiguos. Al igual que not, la palabra clave debe aparecer al principio de la declaración. Por ejemplo:
media="only screen and (min-width: 401px) and (max-width: 600px)"
Los navegadores que no reconocen las consultas de medios esperan una lista de tipos de medios separados por comas, y la especificación dice que deben truncar cada valor inmediatamente antes del primer carácter no alfanumérico que no sea un guión. Por lo tanto, un navegador antiguo debería interpretar el ejemplo anterior de la siguiente manera:
media="only"
Debido a que no existe ningún tipo de medio único, se ignora la hoja de estilo. De manera similar, un navegador antiguo debería interpretar
media="screen and (min-width: 401px) and (max-width: 600px)"
como
media="screen"
En otras palabras, debería aplicar las reglas de estilo a todos los dispositivos de pantalla, aunque no sepa qué significan las consultas de medios.
Lamentablemente, IE 6–8 no logró implementar la especificación correctamente.
En lugar de aplicar los estilos a todos los dispositivos de pantalla, ignora la hoja de estilos por completo.
A pesar de este comportamiento, todavía se recomienda anteponer las consultas de medios solo si desea ocultar los estilos de otros navegadores menos comunes.
Entonces, usando
media="only screen and (min-width: 401px)"
y
media="screen and (min-width: 401px)"
tendrá el mismo efecto en IE6-8: ambos evitarán que se utilicen esos estilos. Sin embargo, aún se descargarán.
Además, en los navegadores que admiten consultas de medios CSS3, ambas versiones cargarán los estilos si el ancho de la ventana gráfica es mayor 401pxy el tipo de medio es pantalla.
No estoy del todo seguro de qué navegadores que no admiten consultas de medios CSS3 necesitarían la onlyversión
media="only screen and (min-width: 401px)"
Opuesto a
media="screen and (min-width: 401px)"
para asegurarse de que no se interprete como
media="screen"
Sería una buena prueba para alguien con acceso a un laboratorio de dispositivos.
Para diseñar muchos teléfonos inteligentes con pantallas más pequeñas, puedes escribir:
@media screen and (max-width:480px) { … }
Para impedir que los navegadores más antiguos vean una hoja de estilo de un teléfono iPhone o Android, puede escribir:
@media only screen and (max-width: 480px;) { … }
Lea este artículo para obtener más información http://webdesign.about.com/od/css3/a/css3-media-queries.htm
