16

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?

2 Respostas 2

22

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/

11
  • 1
    Obrigado Hugo, mas tenho uma duvida, o que você quer dizer com mídias do tipo screen? poderia me explicar?
    – Renan
    Commented 7/11/2018 às 15:38
  • 1
    Consegue dar um exemplo de quando a condição screen and (max-width: 770px) é válida que only screen and (max-width: 770px) não é (para demonstrar a diferença que o only faz)?
    – Woss
    Commented 7/11/2018 às 15:39
  • 2
    @hugocsl Obrigado!
    – Renan
    Commented 7/11/2018 às 15:45
  • 1
    @AndersonCarlosWoss acho que entendi o que vc quis dizer, que o only print seria redundante já que só com o print a regra já se aplicaria apenas no print mesmo e não no screen confere?
    – hugocsl
    Commented 7/11/2018 às 15:53
  • 1
    @hugocsl parabéns pela explicação, super didático e respondeu tudo que eu precisava. Obrigado
    – Renan
    Commented 7/11/2018 às 17:07
0

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .