@media screen (min-width: 769px) {
M
}Theseareacceptablebreakpoints—theywork,andworkforalargenumberofusers.
Butmobiledevicescreenwidthsaremorevariedthanthis.Ratherthanfocuson
iPhones,iPads,andlaptops,consideracontent-centricapproach.
Don't Use device-width with Media Queries
Avoidusingdevice-width(includingmin/max)altogetherformediaqueries.
HighDPIdevicesinparticularmayhaveadevicewidththatdoesnotmatchits
actualpixelcapability.Forinstance,theiPhone 6 hasadevicewidthof 375 pixels,
butitswidthinrenderablepixelsistwicethatamount.Acontent-centricapproachtomediaqueriessetsbreakpointsbasedonthepointat
whichthelayoutstartstoshowitsweaknesses.Onestrategyistostartsmall,which
isalsoknownasamobile-firstapproach.AsBryanReigerputsit,^12 “theabsenceof
supportfor@mediaqueriesisinfactthefirstmediaquery.”Youcandoalotto
createaflexible,responsivelayoutbeforeyouneedtoaddmediaqueries.Thenas
youincreasethewindowwidth,youcanaddstylesthattakeadvantageoftheaddi-
tionalrealestate.Forexample,howwideisthebrowserwindowwhenlinesoftext
becometoolongtoread?Thatcanbethepointatwhichyourlayoutswitchesfrom
asingle-columnlayout(Figure7.1)toatwo-columnlayout(Figure7.2).
(^12) http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Applying CSS Conditionally 293