HTML and CSS Reference
In-Depth Information
WHICH
MEDIA QUERIES
SHOULD YOU
USE?
It is often a challenge to work out exactly which media queries to use. You
need to determine how many different layouts your site needs and at what
width you should change layouts. Also, consider whether you need any other
types of media query. The solution depends on what target audience/devices
you are designing for. If you are creating an app that is designed only for iPad
and iPod, you'll probably get away with having a layout for the iPad screen
size and one for the iPhone size, which breathes a bit for portrait/landscape
orientation:
@media screen and (max-width: 480px) { ... }
@media screen and (max-width: 1024px) { ... }
Yo u m i g ht g o f u r t h e r a n d o p t i m i ze t h e l ayo u t fo r p o r t ra i t / l a n d s c a p e :
@media screen and (orientation: landscape) { ... }
@media screen and (orientation: portrait) { ... }
If you need to target more devices, you might well expand your list of
queries to suit other screen sizes. Targeting devices like this is referred to
as setting device breakpoints .
My personal preference is to use content breakpoints instead: I usually
ignore target devices completely and just add in media queries to fix the
layout when it breaks. This methodology is more flexible and therefore
better overall for supporting a wide range of devices. But it is often a bit
more complicated than just creating a couple of well-thought-out layouts
for specific screen sizes. The choice is yours.
Width- and orientation-based media queries are certainly the most common
media queries you'll use, although with so many high-resolution devices
now available on the market, you might also want to provide different
images or layout features depending on resolution: see the “High-fidelity
Devices” section later in the chapter.
 
Search WWH ::




Custom Search