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


487

¿Cuál es la diferencia entre screeny only screenen las consultas de los 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 usar only screen? ¿ screenNo proporciona por sí misma suficiente información para ser presentada solo para la pantalla?

He visto muchos sitios web receptivos utilizando cualquiera de estas tres formas diferentes:

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

Respuestas:


543

Analicemos sus ejemplos uno por uno.

@media (max-width:632px)

Este dice para una ventana con una max-widthde 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 ay screenuna ventana con max-width632 px aplica el estilo. Esto es casi idéntico al anterior, excepto que está especificando screenen lugar de los otros tipos de medios disponibles, siendo el otro más común print.

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

Aquí hay una cita directamente del W3C para explicar esta.

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 que comienzan 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.

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.


24
Para cualquiera que esté buscando una mejor explicación de por qué la onlypalabra clave ocultará las hojas de estilo de los navegadores más antiguos, vea la respuesta de @hybrid a continuación. Él lo explica muy bien.
JMTyler

1
la respuesta de hybrid es buena, pero también me gusta esta respuesta porque aborda las consultas de medios dentro de CSS en lugar de abordar solo el mediaatributo del linkelemento.
chharvey

2
¿Qué dispositivo no tiene pantalla?
Kokodoko

3
@Kokodoko los que no necesitan uno. Pero en serio, las impresoras y los lectores de pantalla no necesariamente tienen pantallas. Además de cualquier otra cosa actualmente o en el futuro que no se identifique screencomo algo que se enumera en los otros tipos de medios.
Matthew Green

1
@Kokodoko CSS existe para crear una separación de preocupaciones entre contenido y presentación. La presentación cubre mucho más que lo que se puede ver en una pantalla. Es una distinción importante a tener en cuenta independientemente de para qué se esté diseñando.
Matthew Green

231

Lo siguiente es de documentos de Adobe .


La especificación de consultas de medios también proporciona la palabra clave only, que está destinada a ocultar consultas de medios de navegadores antiguos. Al igual not, la palabra clave debe aparecer al comienzo 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 es un guión. Por lo tanto, un navegador antiguo debería interpretar el ejemplo anterior de esta manera:

media="only"

Debido a que no existe el tipo de medio, solo se ignora la hoja de estilo. Del mismo modo, un navegador antiguo debería 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 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 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, 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 completamente 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.


3
Entonces, si estamos hablando de consultas de medios en archivos CSS, podemos descartar "solo", porque los navegadores más antiguos no entienden las consultas de medios, ¿no?
1234ru

Buena, muy lúcida respuesta. ¡Gracias!
Alexander Suraphel el

El enlace compartido fue realmente útil. Gracias
Raphael

Según mi experiencia, "solo" funciona como se esperaba en Symbian OS (teléfonos táctiles Nokia antiguos). Lo usé mucho porque esos navegadores eran realmente malos en el soporte de CSS3, pero aún podía manejar "solo" y "ancho mínimo / máximo" en las consultas de medios correctamente.
Peter Knut

@PeterKnut ¿Por qué incluso soportas dispositivos tan viejos? Genuinamente curioso.
Prometeo

41

Para diseñar muchos teléfonos inteligentes con pantallas más pequeñas, puede escribir:

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

Para evitar que los navegadores 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 más http://webdesign.about.com/od/css3/a/css3-media-queries.htm


3
Todavía no lo tengo muy claro. También actualicé mi pregunta. ¿Puedes dar algún ejemplo?
Jitendra Vyas

44
¿Qué pasa si usa el enfoque Mobile First? Entonces, primero tenemos el CSS móvil y luego usamos min-width para apuntar a sitios más grandes. No debemos usar la onlypalabra clave en ese contexto, ¿verdad?
Ashitaka

¡Esta respuesta fue muy fácil de entender! :) Lo único es evitar que las versiones anteriores como IE 6 u opera 5 o 6 carguen los datos que deben presentarse para Android o Chrome 30 o IE 10 ... La respuesta excelente sandeep :) merece un +1
Afzaal Ahmad Zeeshan

16

La respuesta de @hybrid es bastante informativa, excepto que no explica el propósito mencionado por @ashitaka "¿Qué pasa si usa el enfoque Mobile First? Entonces, primero tenemos el CSS móvil y luego usamos min-width para dirigirnos 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 usen ese estilo de Otro dispositivo como si comience desde la "pantalla" sin que lo lleve a la pantalla, donde como si comience desde el estilo "solo" se ignorará.

Respondiendo a ashitaka considera 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 utilizará con sorprendentes estilos de Android, pero con una sobrecarga innecesaria. En este caso, si un navegador no es compatible, recurrirá a la segunda hoja de estilo ignorando la primera.


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

screenaquí es establecer el tamaño de pantalla de la consulta de medios. Por ejemplo, el ancho máximo del área de visualización es 480px. Por lo tanto, está especificando la pantalla en lugar de los otros tipos de medios disponibles.

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

only screen aquí se utiliza para evitar que los navegadores más antiguos que no admiten consultas de medios con funciones de medios apliquen los estilos especificados.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.