I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.
I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.
Some examples I have found:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Or:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
What should the breakpoints be for each device?
Best Answer
IMO these are the best breakpoints:
Edit: Refined to work better with 960 grids:
In practice, many designers convert pixels to
em
s, largely becauseem
s afford better zooming. At standard zoom1em === 16px
, multiply pixels by1em/16px
to getem
s. For example,320px === 20em
.In response to the comment,
min-width
is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.Regardless of whether you prefer
min-
,max-
, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.