Problem with Media Query

Question

Does anyone know how I can specify a Media Query for each device ? I’m trying to leave the iphone 6, 7 e 8 in a way and in the same cell phones only Plus version I’m changing to suit the layout only it will not, always one ends up passing over the other and is scratched as you can see, someone knows how I can use both ?

Answer 1

Summary
Let’s assume that the screen width of the device has 667px. Both media queries will be met. How to media querie of major max-width this after the minor max-width it is overlapping, that by convention of the CSS what is later declared will override what was declared earlier.

Solution
Just reverse the media queries position, i.e., you first declare the media querie of major max-width and then the minor.

Example:

@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>

Both media queries continue to be attended by the device, but this time who prevails is the smallest max-width because this after.