为什么@media（max-device-width：360px）受@media影响（max-device-width：1024px）？

Question

Just curious why one of the "media size" is affected by the bigger "bigger media size"? I have more code but where thing else works but these two.

 @media only screen and (max-device-width: 360px){ .contact_center_image{ position: relative; margin-left: 20%; bottom: 50px; } .image_size{ width: 400px; height: 300px; } } @media only screen and (max-device-width: 1024px){ .contact_center_image{ position: relative; margin-left: 23%; bottom: 50px; } .image_size{ width: 1000px; height: 700px; } } 

 <div class="contact_center_image"> <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Image" class="image_size"> </div> 

Answer 1

CSS stands for "Cascading Style Sheets", meaning there is a vertical hierarchy. Your lower code takes dominance when both rules apply, and in this case, a screen size less than 360px is also less than 1024px. If you want the 360px rule to have greater priority, you need to move it below the 1024px snippet.

@media only screen and (max-device-width: 1024px){
    .contact_center_image{
        position: relative;
        margin-left: 23%;
        bottom: 50px;       
    }
    .image_size{
        width: 1000px;
        height: 700px;
    }
}


@media only screen and (max-device-width: 360px){
    .contact_center_image{
        position: relative;
        margin-left: 20%;
        bottom: 50px;       
    }
    .image_size{
        width: 400px;
        height: 300px;
    }
}

Answer 2

@media only screen and (max-device-width: 1024px){

This conditional will return true for any device width size up to and including the spacified value.

So think of it as:

@media only screen and (any-device-width-up-to-1024+1px){

Therefore 360px width is less than 1024px width so both your @media rules will be applied.

Try using min-device-width rules instead, or a combination of both max- and min- for each @media scope.

While you can have multiple rules Cascading over each other (when both apply, the last one is applied last), this will cause a lot of style repetitions and you'd need to update multiple @media statements to make a change propergate through these cascades.

Example Tweak:

Below, the first rule will apply to widths of 361 up to 1024 the second will apply to widths from 0 up to 360.

@media only screen and (max-device-width: 1024px)
                   and (min-device-width: 361px) {
    .contact_center_image{
        position: relative;
        margin-left: 23%;
        bottom: 50px;       
    }
    .image_size{
        width: 1000px;
        height: 700px;
    }
}


@media only screen and (max-device-width: 360px){
    .contact_center_image{
        position: relative;
        margin-left: 20%;
        bottom: 50px;       
    }
    .image_size{
        width: 400px;
        height: 300px;
    }
}