mediaqueryconditions.ThatinterfaceisdefinedbytheCSSOM-ViewModule,^8
coveredinthe"UsingmediaquerieswithJavaScript"sectionlater.
Table 7.1. Support for @media (Source CanIUse.com^9 )
Internet Explorer Firefox Chrome Safari Opera
9+a 3.5+ 4+b 3.1+c 1 0.1+
aNosupportformatchMediaAPI.
bVersions4-29supportthenon-standardmin/max-device-pixel-ratioratherthanmin/max-
resolution.
cSupportsthenon-standardmin/max-device-pixel-ratioratherthanmin/max-resolution.
Media Query Syntax: The Basics
Mediaquerysyntaxseemssimpleonthesurface,butsometimesit'sabitcounterin-
tuitive.Initssimplestform,amediaqueryconsistsofamediatype,usedaloneor
incombinationwithamediacondition,suchaswidthororientation.Mediatypes,
aswediscussedearlier,maybeoneormoreofall,screen,print, andspeech.^10
Asimple,type-basedmediaqueryforscreenslookslikethis:
@media screen {
/* Styles go here */
}CSSstylerulesarenestedwithinthis@mediaruleset.Anystylescontainedwithin
willonlybeappliedwhenthedocumentisdisplayedonascreen(asopposedto
beingprinted).
@media screen {
body {
font-size: 20px;
}
}Inthisexample,thebasetextsizeforthisdocumentwillbe20pxwhenit'sviewed
onadesktop,laptop,tablet,mobilephone,ortelevision.
(^8) http://dev.w3.org/csswg/cssom-view/
(^9) http://caniuse.com/#search=media%20queries
(^10) @media,withnomediatypespecified,isequivalentto@media all.
Applying CSS Conditionally 279