CSS Master

Figure 7.2. A document viewed in a wider laptop-sized browser

Therearetwoadvantagestothisapproach.First:yoursitewillstillworkonolder
mobilebrowserswithoutsupportformediaqueries.Thisislessofaconcernasweb
usersadoptmorecapablebrowsersanddevices.Thesecondreasonismoreimport-
ant:thisapproachpreparesyoursiteforawiderrangeofscreenwidthsandresolu-
tions.

Using Media Queries with JavaScript

WecanalsointeractwithmediaqueriesusingaJavaScriptAPI,betterknownas
matchMedia().IfyoulackanyJavaScriptknow-how,youmaygetalittlelostinthis
section.We'llkeeptheexamplesshort,though,sothatthey'reeasiertounderstand.
TheAPIformediaqueriesisactuallydefinedbyadifferentspecification,theCSSOM
ViewModule.^13 It'snotCSS,strictlyspeaking,butsinceit'scloselyrelatedto@media,
we'llcoverit.

(^13) http://dev.w3.org/csswg/cssom-view/
Applying CSS Conditionally 295