css - todos - ¿Cuál es la diferencia entre "pantalla" y "pantalla única" en las consultas de medios?
media query height (4)
¿Cuál es la diferencia entre "pantalla" y "pantalla única" en 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 '' Sólo ''. ¿La screen sí no proporciona suficiente información para ser representada solo para la pantalla?
He visto muchos sitios web sensibles. Algunos usan
@media screen and (max-width:632px)
Algunos
@media (max-width:632px)
y algo
@media only screen and (max-width:632px)
La respuesta de @hybrid es bastante informativa, excepto que no explica el propósito mencionado por @ashitaka "¿Qué sucede si utiliza el enfoque de Mobile First? Entonces, primero tenemos el CSS móvil y luego utilizamos min-width para apuntar a sitios más grandes. No deberíamos usar la única palabra clave en ese contexto, ¿verdad?
Desea agregar aquí que el propósito es simplemente evitar que los navegadores no compatibles utilicen el estilo de Otro dispositivo como si se inicia desde "pantalla" sin que lo lleve a la pantalla, mientras que si se inicia desde el estilo "solo" se ignorará.
Respondiendo a ashitaka consideremos este ejemplo
<link rel="stylesheet" type="text/css"
href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
Si no usamos "solo", seguirá funcionando ya que el estilo de escritorio también se usará en los sorprendentes estilos de Android, pero con una sobrecarga innecesaria. En este caso, si un navegador no lo soporta, retrocederá a la segunda hoja de estilo, ignorando la primera.
Lo siguiente es de documentos de Adobe .
La especificación de consultas de medios también proporciona only la palabra clave, que pretende ocultar las consultas de medios de los navegadores más antiguos. Como 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 debe interpretar el ejemplo anterior de la siguiente manera:
media="only"
Debido a que no existe un tipo de medio como el único, la hoja de estilo se ignora. Del mismo modo, un navegador antiguo debe interpretar
media="screen and (min-width: 401px) and (max-width: 600px)"
como
media="screen"
En otras palabras, debe aplicar las reglas de estilo a todos los dispositivos de pantalla, aunque no sepa qué significan las consultas de los medios.
Desafortunadamente, IE 6–8 no pudo 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 prefijar las consultas de medios con 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 usen esos estilos. Sin embargo, todavía serán descargados.
Además, en los navegadores que admiten consultas de medios CSS3, ambas versiones cargarán los estilos si el ancho de la ventana 401px es mayor que 401px y el tipo de medio es la pantalla.
No estoy completamente seguro de qué navegadores que no admiten consultas de medios CSS3 necesitarían la only versión
media="only screen and (min-width: 401px)"
Opuesto a
media="screen and (min-width: 401px)"
para asegurarse de que no se interpreta como
media="screen"
Sería una buena prueba para alguien con acceso a un laboratorio de dispositivos.
Para diseñar para muchos teléfonos inteligentes con pantallas más pequeñas, podría escribir:
@media screen and (max-width:480px) { … }
Para evitar que los navegadores más antiguos vean una hoja de estilo de teléfono de iPhone o Android, puede escribir:
@media only screen and (max-width: 480px;) { … }
Lea este artículo para obtener más http://webdesign.about.com/od/css3/a/css3-media-queries.htm
Vamos a desglosar los ejemplos uno por uno.
@media (max-width:632px)
Este dice para una ventana con un max-width de 632 píxeles que desea aplicar estos estilos. En ese tamaño, estaría hablando de algo más pequeño que una pantalla de escritorio en la mayoría de los casos.
@media screen and (max-width:632px)
Este dice que para un dispositivo con una screen y una ventana con max-width de 632px aplique el estilo. Esto es casi idéntico al anterior, excepto que está especificando la screen en lugar de los otros tipos de medios disponibles, siendo el otro el más común que se está print .
@media only screen and (max-width:632px)
Aquí hay una cita directamente del W3C para explicar esto.
La palabra clave ''solo'' también se puede usar para ocultar hojas de estilo de agentes de usuarios más antiguos. Los agentes de usuario deben procesar las consultas de medios que comienzan con ''solo'' como si la palabra clave ''solo'' no estuviera presente.
Como no hay un tipo de medio como "solo", 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 en esa página.
Esperemos que esto arroje algo de luz sobre las consultas de los medios de comunicación.
EDITAR:
Asegúrese de revisar la excelente respuesta de @hybrids sobre cómo se maneja realmente la only palabra clave.