Whymightnestingmediaqueriesbeuseful?Here'soneexample:@media screen {
@media (min-width: 20em) {
img {
display: block;
width: 100%;
height: auto;
}
}@media (min-width: 40em) {
img {
display: inline-block;
max-width: 300px;
}
}
}Inthisexample,we'vegroupedallourscreenstylestogether,withsubgroupings
forparticularwindowwidths.Here'sanotherexample,usinghover: on-demand:@media (hover: on-demand) {
@media (pointer: coarse) {
input[type=checkbox] ~ label {
padding: .5em;
}
}
@media (pointer: fine) {
input[type=checkbox] ~ label {
padding: .1em;
}
}
}Withinthisblockaretwofeaturequeriesforpointer.When(pointer: coarse)
istrue,we'lladdahalf-emofpadding.When(pointer: fine),istrue,we'lluse
lesspadding.Working around Legacy Browser Support with only
Asmentionedinthebeginningofthischapter,@mediahasbeenaroundforawhile;
however,thesyntaxandgrammarof@mediahaschangedsignificantlyfromitsori-288 CSS Master