1

pessoal alguém sabe como eu posso especificar um Media Query pra cada dispositivo ? eu estou tentando deixar o do iphone 6, 7 e 8 de um jeito e nos mesmos celulares só que versão Plus eu estou mudando pra se adequar no layout só que não vai, sempre um acaba passando por cima do outro e fica riscado como vocês podem ver, alguém sabe como posso usar os dois ?

inserir a descrição da imagem aqui

1 Resposta 1

2

Resumo
Vamos supor que a largura da tela do dispositivo tem 667px. As duas media queries serão atendidas. Como a media querie de maior max-width esta depois da de menor max-width ela esta sobrepondo, isso por convenção do CSS o que for declarado depois irá sobrepor o que foi declarado antes.

Solução
Basta inverter as media queries de posição, ou seja, primeiro você declara a media querie de maior max-width e depois a de menor.

Exemplo:

@media only screen and (max-width: 736px){
  .titulo{
    color: red;
  }
}

@media only screen and (max-width: 667px){
  .titulo{
    color: blue;
  }
}
<h1 class="titulo">
  Teste
</h1>

Os dois media queries continuam sendo atendido pelo dispositivo, mas dessa vez quem prevalece é o de menor max-width porque esta depois.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .