¿Cuál es la diferencia entre “pantalla” y “única pantalla” en consultas de medios?

¿Cuál es la diferencia entre “pantalla” y “única pantalla” en consultas de medios?

  

¿Por qué estamos obligados a usar ‘ Solo ‘? ¿La screen no proporciona suficiente información para ser renderizada solo para Screen?

He visto muchos sitios web receptivos. Algunos usan

 @media screen and (max-width:632px) 

Algunos

 @media (max-width:632px) 

y algo

 @media only screen and (max-width:632px) 

Analicemos sus ejemplos uno por uno.

 @media (max-width:632px) 

Esta es una ventana con un max-width de 632px que desea aplicar estos estilos. En ese tamaño, en la mayoría de los casos estaría hablando de algo más pequeño que una pantalla de escritorio.

 @media screen and (max-width:632px) 

Este dice que para un dispositivo con una screen y una ventana con max-width de 632px aplica el estilo. Esto es casi idéntico al anterior, excepto que está especificando la screen en oposición a los otros tipos de medios disponibles, el otro más común es el de 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 usuario anteriores. Los agentes de usuario deben procesar las consultas de medios comenzando con “solo” como si la palabra clave “solo” no estuviera presente.

Como no existe 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.

Espero que esto arroje algo de luz sobre las consultas de los medios.

EDITAR:

Asegúrese de ver la excelente respuesta de @hybrids sobre cómo se maneja realmente la only palabra clave.

Lo siguiente es de documentos de Adobe .


La especificación de consultas de medios también proporciona only la palabra clave, que está destinada a ocultar consultas de medios de navegadores antiguos. Al igual que not , la palabra clave debe aparecer al comienzo de la statement. 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. Entonces, un navegador viejo debería interpretar el ejemplo anterior como este:

 media="only" 

Debido a que no existe dicho tipo de medio como único, la hoja de estilo se ignora. Del mismo modo, un viejo navegador 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 lo que significan las consultas de 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 por completo la hoja de estilos.

A pesar de este comportamiento, se recomienda prefijar 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 usen esos estilos. Sin embargo, todavía se descargarán.

Además, en navegadores compatibles con 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 pantalla.

No estoy del todo seguro de qué navegadores que no son compatibles con las 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 interprete 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, puede escribir:

 @media screen and (max-width:480px) { … } 

Para evitar que los navegadores más antiguos vean una hoja de estilo de 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

Answer by @hybrid es bastante informativo, excepto que no explica el propósito mencionado por @ashitaka “¿Qué pasa si usas el enfoque Mobile First? Entonces, primero tenemos el css móvil y luego usamos min-width para apuntar a sitios más grandes. No deberíamos utilizar la única palabra clave en ese contexto, ¿verdad?

Desea agregar aquí que el propósito es simplemente evitar que los navegadores no compatibles utilicen ese estilo de Otro dispositivo como si comenzara desde “pantalla” sin que lo tome para la pantalla donde se ignorará como si partiera del estilo “único”.

Respondiendo a ashitaka considera este ejemplo

   

Si no usamos “solo”, seguirá funcionando, ya que el estilo de escritorio también se utilizará para llamar la atención sobre los estilos de Android pero con una sobrecarga innecesaria. En este caso, SI un navegador no es compatible, retrocederá a la segunda hoja de estilo ignorando la primera.