2
respostas

Qual a diferença entre usar esse código e min-width: 600px?

Diferença entre usar o código informado e

@media (min-width: 600px) { .menu-abrir, .menu-fechar { display: none; }

2 respostas

Oi, Fernando, tudo bem?

A pseudo-classe de negação :not() é uma notação em que recebe um argumneto e, no caso, seleicona um elemento em que não é representado pelo argumento. Nesse caso em específico, é conhecido por negação de uma media query Bem, no caso do código em questão:

@media not all and (max-width: 600px) {
    .menu-abrir,
    .menu-fechar {
        display: none;
    }    
}

Ele nos diz o seguinte: aplique É como falar not(all and (min-width:600px)). O all é verdadeiro sempre então a lógica acaba ficando equivalente a not(min-width:600px). Por quê? Por que:

 not x and y = not (x and y) ≠ (not x) and y

Para saber mais: http://sergiolopes.org/negando-media-queries/

Espero ter te ajudado!

A diferença é de sintaxe e de implementação, mas funciona do mesmo jeito e inclusive mais rapidamente em termos de ms. No código da aula a gente checa se a tela está maior que 600px invertendo a o resultado da declaração max-width e em todos os tipos de midias "all". O seu também checa todas as mídias, já que o "all" é o padrão das medias queries, e usa o resultado do min-width diretamente para checar o tamanho da tela.