it-swarm-pt.tech

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

Qual é a diferença entre screen e only screen em 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? O screen não fornece informações suficientes para ser renderizado somente para a tela?

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)
442
Jitendra Vyas

Vamos dividir seus exemplos um por um.

@media (max-width:632px)

Este está dizendo para uma janela com um max-width de 632px que você deseja aplicar a estes estilos. Nesse tamanho, você estaria falando sobre qualquer coisa menor que uma tela de desktop na maioria dos casos.

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

Este está dizendo para um dispositivo com um screen e uma janela com max-width de 632px aplica o estilo. Isso é quase idêntico ao acima, exceto que você está especificando screen ao contrário de outros tipos de mídia disponíveis o outro mais comum sendo print.

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

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

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

Como não existe esse 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 é mostrado no exemplo 9 nessa página.

Espero que isso lance alguma luz sobre as consultas de mídia.

EDITAR:

Certifique-se de verificar @ resposta híbrida excelente sobre como a palavra-chave only é realmente tratada.

505
Matthew Green

O seguinte é de Adobe docs .


A especificação de consultas de mídia também fornece a palavra-chave only, que se destina a ocultar consultas de mídia de navegadores mais antigos. Como 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 as consultas de mídia esperam uma lista separada por vírgulas de tipos de mídia, e a especificação diz que eles devem truncar cada valor imediatamente antes do primeiro valor não-alfanumérico. personagem que não é um hífen. Portanto, um navegador antigo deve interpretar o exemplo anterior como este:

media="only"

Como não existe esse tipo de mídia apenas, 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, ele 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, IE 6–8 não conseguiu implementar a especificação corretamente

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

Apesar desse comportamento, ainda é recomendado 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. Eles, no entanto, ainda serão baixados.

Além disso, em navegadores que suportam consultas de mídia CSS3, ambas as versões carregarão os estilos se a largura da viewport for maior que 401px e 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 versão only

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

ao contrário de

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

para se certificar de que não é interpretado como

media="screen"

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

213
hybrid

Para estilizar muitos smartphones com telas menores, você poderia escrever:

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

Para impedir que navegadores mais antigos vejam uma folha de estilos de telefone do 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

40
sandeep

Resposta por @hybrid é bastante informativa, exceto que isso não explica o propósito mencionado por @ashitaka "E se você usar a abordagem Mobile First? Então, temos o CSS móvel primeiro e depois usamos min-width para segmentar sites maiores. Não devemos usar a única palavra-chave nesse contexto, certo? "

Deseja adicionar aqui que o objetivo é simplesmente impedir que navegadores não-suportados usem esse estilo Outro dispositivo como se ele fosse iniciado a partir da "tela" sem que ele levasse para a tela onde como se ele fosse iniciado a partir do 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á como o estilo de área de trabalho também será usado em estilos do Android, mas com sobrecarga desnecessária. Nesse caso, se um navegador não for compatível, ele recorrerá à segunda folha de estilo, ignorando a primeira.

16
Diablo Geto