Lesson 6: Media Queries Tips

Today, let's make sure we use media queries the right way

Tip 1: Don’t Use Device Specific Breakpoints

Hopefully this goes without saying, but just in case you need a reminder or you
haven’t come across this best practice before, I thought it was worth
reiterating.

Device specific breakpoints are easily identified in your code with media
queries that look like this (comments added for clarity):

/* ipad portrait */ @media screen and (min-width: 768px;)

{} /* ipad landscape */ @media screen and (min-width:
1024px;) {} /* iphone */ @media screen and (min-width:
320px) and (max-width: 480px;) {}

These breakpoints have been set up for Apple devices and have “magic
number” values such as 768px or 1024px.

What if a user’s window is 1025px or 1023px?

The media queries wouldn’t take affect and the styles for that device size would
not apply.

Sometimes you may need a very specific value for your breakpoint (more on
that in a second) but seeing these device specific breakpoints is a code smell as
far as I’m concerned.

So what should you do instead?

Tip 2: Set Major Breakpoints And Minor Tweakpoints

When working on a responsive project, I tend to set arbitrary whole-number
breakpoints that are approximately the dimensions of the majority of phones,
tablets, and desktop/laptop devices.

I would tend to use the following major breakpoints (although sometimes this
may be altered on a project by project basis):

/* large phones and small tablets */ @media screen and

(min-width: 500px;) {} /* tablets and small monitors */
@media screen and (min-width: 800px;) {} /* laptops and
desktops */ @media screen and (min-width: 1200px;) {}
Using these breakpoints doesn’t limit the design to only change at these points
but gives a good foundation for working with the three major device types.

For content-based tweaking of the design (ie: when the content starts to look
broken, unbalanced, or doesn’t quite fit) you can then use tweakpoints to
nudge elements around and polish the details of your project.

/* tweak position of share button */ @media screen and

(min-width: 1150px;) { margin-right: 1em; }

Tip 3: Use Em Or Rem As Your Breakpoint Units

Instead of px, use one of these relative units for better scalability if the user
zooms the page or increases the size of the text. As an example, my major
breakpoints above would look as follows when sized in ems.

/* 500px / 16px = 31.25em */ @media screen and (min-width:

31.25em;) {} /* 800px / 16px = 50em */ @media screen and
(min-width: 50em;) {} /* 1200px / 16px = 75em */ @media
screen and (min-width: 75em;) {}

💯 You did it! 💯

There you have it, the basics of em, rem and media queries - enough to keep
your sites and apps looking good on any scren. Play around with that for a few
(3) days, and I'll come back to you with some further reading and next steps,
along with your free course ebook.