Range Media Feature Queries and min- and max- Prefixes
Amoreflexiblemediaquerytestsforaminimumormaximumviewportwidth.We
canapplystyleswhentheviewportisatleastthiswide,ormorethanthatwide.
Luckilyforus,theMediaQueriesLevel 3 specificationdefinedthemin-andmax-
prefixesforthispurpose.Theseprefixesestablishthelowerorupperboundaries
ofafeaturerange(seeTable7.2).
Let'supdateourpreviouscode:
@media (max-width: 30em) {
nav li {
display: block;
}
}Inthisexample,nav liwouldhaveadisplay:propertyvalueofblockfroma
viewportwidthof 0 ,uptoandincludingamaximumviewportwidthof30em.
Wecanalsodefineamediaqueryrangeusingmin-andmax-,alongwiththeand
keyword.Forexample,ifwewantedtoswitchfromdisplay: blocktodisplay:
flexbetween30emand100em,wemightdothefollowing:
@media (min-width: 30em) and (max-width: 100em) {
nav li {
display: flex;
}
}Ifbothconditionsaretrue—thatis,theviewportwidthisatleast30em,butnot
greaterthan100em—ourstyleswillapply.
Now,thereareotherwaystoexpressarange,andhere'swherethestoryofmedia
queriesbecomesmorecomplicated.Thelatestversionofthespecificationdefines
arangemediafeaturetype.Thisrangetypeincludespropertiessuchaswidthand
height,andallowsforcomparisonoperatorssuchas>and<=.Wecould,forex-
ample,rewritethequerylikeso:
Applying CSS Conditionally 281