loading...
Cover image for Responsive Sizing With rem CSS Units
Vets Who Code

Responsive Sizing With rem CSS Units

nbhankes profile image Nathan B Hankes Updated on ・1 min read

By using rem CSS units, components will change size when the root font size changes, giving developers another method of responsive design.

The CSS unit "rem" stands for "root em." The scale of a rem is dependent on the root html font size. While most browsers default the html font size at 16px (meaning 1 rem = 16 pixels), we can adjust the root font size in order to achieve our desired outcome.

Study the CodePen example below as the JavaScript function cycles through root font sizes ranging between 12px and 28px.

Using @media for responsive design

By using @media to adjust the html font-size, you can design responsive components without worrying about how they will behave as they shrink and expand.

The example below changes the root font-size from 28px to 12px when the screen width 600px or less. So when the screen width is 600px or less, the component in the CodePen example above would be the smallest size you see. And in a a screen larger than 600px, the component and font size will appear at the largest size you see.

html {
  font-size: 28px;
}

@media only screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
}

What's your favorite trait of the rem CSS unit?

What don't you like about the rem CSS unit?

Sound off below!

Discussion

pic
Editor guide