DEV Community

loading...

A Simple CSS Trick to Instantly Make a Site Responsive Without Having a Ton of Code in Your Media Queries

Josh Lee
Updated on ・2 min read

Hey, Josh here again. Lately, I’ve been showing you how to build projects with Ruby on Rails and React.js. Today, I’m going to show you something a little bit different – how to easily make your website responsive.

If you’ve written any CSS for responsive websites, then you know how much of a pain it can be to write media queries. This responsive technique involves only changing your font-size for each media query.

It’s all about using the ‘rem’ unit instead of using pixels. You might be used to writing something like this:

.my-class {
 margin-top: 16px;
}
Enter fullscreen mode Exit fullscreen mode

Instead of using the ‘px’ unit, you should be using the ‘rem’ unit. But how does the ‘rem’ unit work?

‘Rem’ stands for root em and it’s a dynamic value based on the root font-size. The browser default font-size is 16px. That means 1 rem == 16px. In our above example, we can use the following:

.my-class {
 margin-top: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

But that doesn’t really change anything right now. We have the same margin at the top of our class. So why did we do this?

Easy, now, in your media queries, you can change your font-size and this will change everything that uses the ‘rem’ unit.

@media only screen and (max-width: 600px) {
  html {
    font-size: 80%;
  }
}
Enter fullscreen mode Exit fullscreen mode

This makes your font 80% of the root em, currently at 16px. That means on this media query, your font-size becomes 12.8px. And all of the other CSS you’ve written will now be based on this 12.8px value.

By making this one change – the font-size of the HTML file – you change everything else that uses the rem units.

You should immediately see how powerful this is. Instead of writing a ton of CSS in your media queries, all you have to do is adjust your font-size. Sure, you might have to add some more CSS, but this does most of the heavy lifting.

I should also note, instead of basing everything off the 16px value (the browser's default), you can just set your font-size in your html element without the media queries.

html {
  font-size: 62.5%;
}
Enter fullscreen mode Exit fullscreen mode

To make sure you see all of my new articles about CSS and other parts of web development, follow me on Twitter.

Discussion (8)

Collapse
farhanbudye profile image
Farhan Budye

Hi Josh... Hope you're doing great!
Thank you for sharing this blog it's nice... just a question and a suggestion what's your view about using vmax/vmin for font size, margins and padding?
They also come in handy and are a great alternative for units like %, rem... But that's just me... Would like to hear it from you.

Thank you!

Collapse
jleewebdev profile image
Josh Lee Author

I don't really have a strong opinion. I just know this is what I've used and it's worked for me. Maybe something else works better for you!

Collapse
farhanbudye profile image
Farhan Budye

Okay no problem... Thanks for sharing 😊

Collapse
hackergal profile image
Melanie Molifie

Oh. My. Woooord. I'm going to try this right now!!! I hope I execute it correctly. Thanks in advance 😄🙌

Collapse
ckoulatsi profile image
Carlos Koulatsi

Try clamp() instead.

Collapse
txsrangers profile image
Kevin

You're better off using em's for padding and margins, and rem's for font sizes.

Collapse
israel1st profile image
israel1st

thank you for this

Collapse
drew_mc profile image
Drew McConville

Responsive design isn't as simple as smaller on smaller screens and larger on larger screens.