Wecanalsocreatealistofmediaqueriestowhichourstyleswillapplybyseparating
eachquerywithacomma.Commasinthemediaquerylistfunctionsimilarlytoan
ORoperator.Ifthebrowserordevicemeetsanyconditioninthelist,thestyleswill
beapplied.Forexample,wecouldlimitstylestoscreenorprintusingthefollowing:@media screen, print {
body {
font-size: 16px;
}
}Therealpowerofmediaqueries,however,comeswhenyouaddamediafeature
query.Mediafeaturequeriesinterrogatethecapabilitiesofthedeviceorconditions
oftheviewport.Amediafeaturequeryconsistsofapropertyandavalue,separated
byacolon.Theentirequerymustbewrappedinparentheses.Here'sanexample:@media (width: 30em) {
nav li {
display: block;
}
}Whatwe'redoingisapplyinganewstyletonav lionlywhenthewidthofthe
viewportisequalto30em;.Sinceemunitsarerelative,usingthemforwidthmakes
themostsenseonscreens.Let'susetheandkeywordtomakeamorespecificmedia
query:s@media screen and (width: 30em) {
nav li {
display: block;
}
}Thesestyleswillbeappliedonlywhentheoutputdeviceisascreenanditswidth
is30em.Noticeherethatthemediatypeisnotenclosedbyparentheses,unlikeour
mediafeature(width: 30em).Thequeryabovehasasmallproblem,however.Iftheviewportiswiderthan30em
ornarrowerthan30em—andnotexactly30em—thesestyleswon'tbeapplied.What
weneedinsteadisarange.280 CSS Master