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

¿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)

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.

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.

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

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.

@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.