Diferença entre usar o código informado e
@media (min-width: 600px) { .menu-abrir, .menu-fechar { display: none; }
Diferença entre usar o código informado e
@media (min-width: 600px) { .menu-abrir, .menu-fechar { display: none; }
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.