Qual é a diferença entre "tela" e "única tela" nas consultas de mídia?

Qual é a diferença entre screene only screennas consultas de mídia?

<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 que somos obrigados a usar only screen? Ele screennão fornece informações suficientes para serem renderizadas apenas para a tela?

Eu já vi muitos sites responsivos usando qualquer uma dessas três maneiras diferentes:

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

@media (max-width:632px)

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

Vamos detalhar seus exemplos um por um.

@media (max-width:632px)

Este está dizendo para uma janela com max-width632px que você deseja aplicar esses estilos. Nesse tamanho, você estaria falando de algo menor que uma tela de desktop na maioria dos casos.

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

Este está dizendo para um dispositivo com ae screenuma janela com max-width632px aplicar o estilo. Isso é quase idêntico ao acima, exceto que você está especificando, screenpor oposição aos outros tipos de mídia disponíveis, o outro mais comum print.

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

Aqui está uma citação diretamente do W3C para explicar este.

A palavra-chave 'only' também pode ser usada para ocultar folhas de estilo de agentes de usuários mais antigos. Os agentes do usuário devem processar consultas de mídia começando com 'only' como se a palavra-chave 'only' não estivesse presente.

Como não existe um tipo de mídia como "somente", a folha de estilos deve ser ignorada pelos navegadores mais antigos.

Aqui está o link para essa citação que é mostrada no exemplo 9 nessa página.

Esperançosamente isso lança alguma luz sobre as consultas de mídia.

EDITAR:

Verifique @hybrids excelente resposta sobre como a onlypalavra-chave é realmente tratada.

O seguinte é dos documentos da Adobe .

A especificação de consultas de mídia também fornece a palavra-chave only, cujo objetivo é ocultar consultas de mídia de navegadores mais antigos. Assim not, a palavra-chave deve vir no início da declaração. Por exemplo:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Os navegadores que não reconhecem consultas de mídia esperam uma lista de tipos de mídia separados por vírgula, e a especificação diz que eles devem truncar cada valor imediatamente antes do primeiro caractere não alfanumérico que não é um hífen. Portanto, um navegador antigo deve interpretar o exemplo anterior como este:

media="only"

Como não existe apenas um tipo de mídia, a folha de estilo é ignorada. Da mesma forma, um navegador antigo deve interpretar

media="screen and (min-width: 401px) and (max-width: 600px)"

Como

media="screen"

Em outras palavras, deve aplicar as regras de estilo a todos os dispositivos de tela, mesmo que não saiba o que as consultas de mídia significam.

Infelizmente, o IE 6–8 falhou ao implementar a especificação corretamente.

Em vez de aplicar os estilos a todos os dispositivos de tela, ele ignora completamente a folha de estilos.

Apesar desse comportamento, ainda é recomendável prefixar as consultas de mídia apenas se você quiser ocultar os estilos de outros navegadores menos comuns.

Então, usando

media="only screen and (min-width: 401px)"

e

media="screen and (min-width: 401px)"

terá o mesmo efeito no IE6-8: ambos impedirão que esses estilos sejam usados. No entanto, eles ainda serão baixados.

Além disso, em navegadores que suportam consultas de mídia CSS3, ambas as versões carregam os estilos se a largura da janela de exibição for maior que 401pxe o tipo de mídia for tela.

Não tenho certeza de quais navegadores que não suportam consultas de mídia CSS3 precisariam da onlyversão

media="only screen and (min-width: 401px)" 

em oposição a

media="screen and (min-width: 401px)"

para garantir que não seja interpretado como

media="screen"

Seria um bom teste para alguém com acesso a um laboratório de dispositivos.

Para criar estilos para muitos smartphones com telas menores, você pode escrever:

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

Para impedir que navegadores mais antigos vejam uma folha de estilo de telefone para iPhone ou Android, você pode escrever:

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

Leia este artigo para mais http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Responder por @hybrid é bastante informativo, exceto que não explica o objetivo mencionado por @ashitaka "E se você usar a abordagem Mobile First? Portanto, primeiro temos o CSS para dispositivos móveis e depois usamos largura mínima para segmentar sites maiores. Não devemos usar a única palavra-chave nesse contexto, certo? "

Deseja acrescentar aqui que o objetivo é simplesmente impedir que navegadores não compatíveis usem esse estilo de Outro dispositivo como se fosse iniciado na "tela" sem que o leve para a tela onde, como se fosse iniciado no estilo "somente", será ignorado.

Respondendo a ashitaka, considere este exemplo

<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)" />

Se não usarmos "somente", ele ainda funcionará, pois o estilo da área de trabalho também será usado para encontrar estilos do Android, mas com sobrecarga desnecessária. Nesse caso, se um navegador não for compatível, ele retornará à segunda folha de estilo, ignorando a primeira.

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

screenaqui é para definir o tamanho da tela da consulta de mídia. Por exemplo, a largura máxima da área de exibição é 480px. Portanto, está especificando a tela em oposição aos outros tipos de mídia disponíveis.

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

only screen aqui é usado para impedir que navegadores mais antigos que não suportam consultas de mídia com recursos de mídia apliquem os estilos especificados.