CSS Master

Wecanalsocreatealistofmediaqueriestowhichourstyleswillapplybyseparating eachquerywithacomma.Commasinthemediaquerylistfunctionsim ...

Range Media Feature Queries and min- and max- Prefixes Amoreflexiblemediaquerytestsforaminimumormaximumviewportwidth.We canapply ...

@media (width >= 30em) and (width <= 100em) { nav li { display: block; } } That'salittleclearerthan@media (min-width: 30em ...

Table 7.2. Range media feature types that can be used with the min- and max- prefixes. Property Description Value type ratio (su ...

d Internet Explorer ≤ 11 only supports dpiunits.MicrosoftEdgeonlysupportsdpianddppxunits. Notallmediafeaturepropertiessupportran ...

Table 7.3. Discrete media feature types, descriptions, and legitimate values for each Property Description Acceptable values Whe ...

Property Description Acceptable values Presence and accuracy of the none | coarse | fine primary pointing device as determined b ...

@media screen and (hover: on-demand) { input[type=checkbox] + label { padding: .5em; } } Theothermediafeaturethat'smakingitswayi ...

Whymightnestingmediaqueriesbeuseful?Here'soneexample: @media screen { @media (min-width: 20em) { img { display: block; width: 10 ...

ginalimplementation.AstheMediaQueries,Level 4 specificationexplains,the originalerror-handlingbehavior: [W]ouldconsumethecharact ...

@media not print and (min-resolution: 1.5dppx) { .external { background: url('arrow-lowres.png'); } } Noticeherethatnotcomesbefo ...

@import url(hi-res-icons.css) (min-resolution: 1.5dppx), (min- ➥resolution: 96dpi); Use @import with Caution @importhasitsdrawba ...

Finally,wecanusethemediaattributewiththesourceelementtoservedifferent filesfordifferentwindowwidthsanddeviceresolutions.Whatfoll ...

@media screen (min-width: 769px) { M } Theseareacceptablebreakpoints—theywork,andworkforalargenumberofusers. Butmobiledevicescre ...

Figure 7.1. A document viewed in a mobile browser width 294 CSS Master ...

Figure 7.2. A document viewed in a wider laptop-sized browser Therearetwoadvantagestothisapproach.First:yoursitewillstillworkono ...

ThematchMedia()methodisapropertyofthewindowobject.Thatmeanswecan refertoitusingwindow.matchMedia()orjustmatchMedia().Theformeris ...

if(matchMedia("(max-width: 480px) and (max-resolution: 1dppx)") { document.querySelector('video').src = 'smallvideo.mp4'; } Ifth ...

wecanrespondtochangesinourdocument'senvironmentwiththeaddListener() method.TheaddListener()methodacceptsafunctionasitsargument.T ...

isLandscape.addEventListener('change', toggleClass); // Add listener isLandscape.removeEventListener('change', toggleClass); // ...