Usar @media, @media screen and ou @media only screen and Tem alguma diferença? – css css3
Pergunta:
Queria saber se tem alguma diferença no css ao usar um desses media queries,
Exemplo A:
@media(max-width:770px) {
.texto{
color:red
}
}
Exemplo B:
@media screen and (max-width: 770px) {
.texto{
color:red;
}
}
Exemplo C:
@media only screen and (max-width: 770px) {
body {
color:red;
}
}
Fiz testes aqui com cada um deles, e todos funcionaram.
Tem diferença?
Autor da pergunta Renan Osorio
hugocsl
Sim existem diferença, até pq nem toda a @media é screen, pode ser print por exemplo
@media(max-width:770px) {
.texto{
color:red
}
}
No exemplo acima significa que para qualquer mídia que a largura seja de até 770px, mesmo seja uma TV, Monitor e até uma Impressora, a regra CSS ali contida vai ser aplicada.
Já nesse exemplo abaixo significa que em mídias do tipo screen e com telas de até 770px de largura a regra vai ser aplicada. (esse e é muito importante, pois o CSS só é aplicado se as duas regras screen e max-width corresponderem)
@media screen and (max-width: 770px) {
.texto{
color:red;
}
}
Sobre o and
Veja que a sua regra @media pode ser bem complexa, e vc pode encadear vários parâmetros que deve ser atendidos para a regra ser aplicada. Por exemplo:
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
body { line-height: 1.4; }
}
Repare que vc vai “somando” requisitos com o and, logo para esse css ser aplicado precisa que:
a mídia tem que ser tela
**e** ter no mínimo 320px de largura
**e** no máximo 480px de largura
**e** a tela deve ter densidade de pixel de 2
Se um dos requisitos não retornar true a regra não é aplicada
The
andoperator is used for combining multiple media features together into a single media query, requiring each chained feature to returntruein order for the query to betrue. It is also used for joining media features with media types.
Nesse outro exemplo o seletor only significa que apenas para mídia screen e com telas até 600px a regra vai ser aplicada. Essa regra não será aplicada a outras mídias como a print por exemplo
@media only screen and (max-width: 600px) {
body {
color:red;
}
}
Exemplo de uso
Vamos supor que vc tenha um elemento na cor Amarela, que aparece bem na Tela do Computador, mas quando for imprimir o Amarelo não vai ficar legal e vc gostaria que ele ficasse Preto, como vc poderia resolver isso? Simples, usando @media only print. Então no seu CSS vc teria algo como:
div {
background-color: yellow;
width: 100px;
height: 100px;
}
@media only print {
div {
background-color: black;
}
}
<div></div>
Repare que com o exemplo acima quando vc der um Ctrl+P a div não vai aparecer Amarela, vai ficar Preta!
Sobre o Only
The
onlyoperator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use theonlyoperator, you must specify an explicit media type.
Em português
O operador only é usado para aplicar um estilo somente se uma consulta inteira corresponder e é útil para impedir que navegadores mais antigos apliquem estilos selecionados. Se você usar o operador only, deverá especificar um tipo de mídia explícito. (no caso se o tipo de mídia é screen, print ou speech)
Um esclarecimento sobre o Only
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
Ao que parece o atributo only também pode ser usado para que navegadores antigos ignorem a regra de css contida no @media, uma vez que eles podem não fazer distinção entre os tipos de mídia diferentes, veja que eles podem não ver diferença entre um @media screen de um @media print, para esses navegadores tudo seria uma coisa só. Então para fazer com que eles ignorem a regra se usa o only.
Resumindo: Nos navegadores que entendem a diferença entre print e screen não há necessidade do only, porém, nos navegador que não entendem as diferenças entre as mídias se usa o only para que ele não reconheça a tag e a ignore.
Fonte1: https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media
Fonte2: https://www.w3.org/TR/css3-mediaqueries/
A grande diferença tem a ver com as resoluções que queres o 1 linha de código e para aquela resolução(assume a resolucao e ajusta a outros ecrans) a 2 linha e para screen e a resolução(consegue ler em outras ecran ajustando) e a 3 linha de código e só para ecran e aquela resolução(só lê em ecrans e aquela formatação especifica) mas le o link explica melhor que eu ( quando digo screen são monitores tipo pc )
info da google dev
Tem diferença sim. only serve para alguma coisa hoje? Provavelmente não.
Segundo o documento de especificações da W3C sobre media queries o operador lógico only serve para evitar que os estilos especificados sejam exibidos em navegadores antigos que não dão suporte a media features, como “max-width” por exemplo.
O CSS linkado abaixo, por exemplo, seria ignorado por navegadores que não entendem a media feature color.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.



