Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

uso do operador 'not' na media query

A minha duvida a respeito deste assunto solucionada em um outro post. Entretanto, eu nao entendi ao certo a seguinte frase:

"O problema é quando vamos usar o not. A especificação não deixa usarmos o not direto na media query. Ele nega o bloco @media inteiro então acharam uma boa ideia o media type ser obrigatório e estar visível."

Se o objetivo de usar o operador not seria para negar todo bloco, entao qual o problema de usar @media not (max-width: 600px)? Simplesmente porque a especificacao solicita desta forma sem uma explicacao logica para isso?

3 respostas

Fala aí Tiago, tudo bem? O uso do not é bem específico, precisaria entender porque você está querendo usá-lo.

No exemplo que você deu, bastaria trocar o max-width por min-width que a media query estaria sendo negada.

Outro detalhe, se você adicionar o not para ela, ele vai tentar dar match com outra media.

Espero ter ajudado.

Oi, Matheus.

Entao, o uso do operador not seria para esta atividade do curso. E utilizar o min-width foi dito pelo instrutor que nao seria o correto:

"Um ponto curioso sobre exercício é a negativa da media query. Antes tínhamos @media (max-width:600px) e agora queremos o inverso dela. Como fazer?

A primeira reação é fazer @media (min-width:600px), mas isso está errado. Como os valores são inclusive, no ponto 600px, as 2 media queries vão ser executadas.

Então, pensamos em @media (min-width:601px). É quase certo. Realmente a media query anterior vai executar até 600px inclusive, e essa vai de 601px em diante. Mas isso só funcionaria se assumirmos que não existe nenhum valor entre 600px e 601px, como deveria ser. Mas não é. As telas de alta resolução e o zoom do usuário afetam essa conta e criam o conceito de subpixels. Em CSS, um px não é um pixel físico na tela, mas uma medida que depende de vários fatores (e pode ser flutuante).

Assim, a única forma é negar a media query com not. Um detalhe é que @media not (max-width:600px) é uma sintaxe inválida. Precisamos fazer @media not all and (max-width:600px). Note que o not nega a media query toda e não só a parte do all."

solução!

Sim, se você for usar o not vai precisar usar com all.

Mas, em cenários reais, isso não vai acontecer, raramente usamos o not. Uma vez que o mesmo não é tão necessário, principalmente para exemplos de width.

Talvez aplicar o not para uma determinada screen ou print seja uma alternativa, mas, para controlar resolução, não faz sentido.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software