@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?
Yes, both will match, according to normal stacking rules, that is, the one below covers the one above.