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 and
operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true
in order for the query to be true
. 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 only
operator 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 the only
operator, 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/