html5 - Responsive WEB, media query issues.

Question

@media screen and (max-width:768px){
    body{
        background: lightgreen;
        .content{
            width: 700px;
            height: 1004px;
        }
    }
    
}


@media screen and (min-width:768px) and (max-width:1200px){
    body{
        background: lightgreen;
        .content{
            width: 1060px;
            height: 1900px;
        }
    }
}

Regarding these two media queries, I would like to ask if a device width is exactly 768px, then which media query is applicable to it, or the second media query can be expressed as (x>=768&&x<1200???). Also, is there any order for these two media inquiries?

Answer 1

Yes, both will match, according to normal stacking rules, that is, the one below covers the one above.