3
respostas

@ media - Teste Ferramentas do Desenvolvedor Google Chrome

Boa noite, Consegui criar o css para telas de até 480px, porém ao testar com a função de rotação do celular nas ferramentas do Desenvolvedor do navegador, a estilização foi perdida. Acredito que seja pela largura ter aumentado e ultrapassado o limite de 480px. Neste caso, tentei criar outro estilo no mesmo arquivo css aplicado a telas com até 820px, porém algumas configurações interferiram na estilização até 480 px; Como poderia resolver para que o último estilo(até 820px) não atrapalhe o anterior?

3 respostas

Olá Suheil El Aouar

Nessa caso: tempos duas propriedades muito importantes max e min

@media only screen and (max-width: 360px) { ... } @media only screen and (min-width: 460px) { ... } @media only screen and (min-width: 768px) { ... } @media only screen and (min-width: 900px) { ... }

caso resolva por favor finalizar o post.

Bom dia, Sebastião Obrigado pelo retorno. Pelo que entendi, cada @media do seu exemplo teria um bloco de código de estilização, correto? Existe uma forma de aplicar um CSS à um intervalo com apenas um bloco? Exemplo: @media only screen and (min-width: 360px and max-width: 768px). Isso é possível ou é necessário criar um bloco para cada um separado?

Além disso, na ordem apresentada no exemplo, o "@media only screen and (min-width: 460px) { ... }" sobrescreve as regras posteriores já que ela atende telas a partir de 460px em diante? Como funciona essa hierarquia entre as declarações de estilos para media?

Boa noite,

achei um link: que vai ti ajudar melhor que eu coloca-se aqui.

https://www.devmedia.com.br/utilizando-css-media-queries/27085

mais se precisar de mais detalhes pode me chamar aqui.