Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Dúvida sobre media queries

Quando eu coloco a condição sendo min-width e testo no meu celular, eu vejo que não importa se a tela está em modo paisagem ou retrato; a partir de uma resolução os elementos ficam em uma posição e antes dessa resolução em outra posição. Quando eu coloco a condição como orientation: landscape ele funciona do jeito certo. Eu achava que o min-width iria ver a largura do celular na orientação que ele estivesse, então no modo retrato ia ser menor, mas parece que ele está pegando sempre a mesma medida. Meu celular que tem algum problema ou eu que não entendi como funciona e devo usar orientation mesmo? No pc ele funciona direito, eu vejo que quando eu aumento a janela o código da media query é executado e se eu aumentar o min-width o código deixa de ser executado, até eu amentar a janela de novo.

1 resposta
solução!

Olá João, tudo bem?

Responsividade é a chave para um bom site, a sua dúvida é bem comum, a grande diferença é que como o nome já diz, o 'orientation' trabalha com a orientação do dispositivo, já o 'min e max width' são 'breakpoints', no português: pontos de quebra. Recomendo que use ao invés de 'min', utilize 'max-width: 767px', assim ele ira 'quebrar' em dispositivos mobile. Espero ter ajudado!

Dê uma olhada nesse artigo: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a