Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Matthew Francis
Matthew Francis
6,967 Points
Posted by Matthew Francis
Matthew Francis
6,967 Points

Responsive layout - Clarification in px and rem

For scalability in different screens, I've learned that we should always use relative units (like rem, em, %) rather than px.

Rem/ems are based on the browser's font size; all browsers have different font-sizes, so the purpose of rem/ems is to ensure everything looks the same in different browsers or when someone changes the default font size in the browser's settings. So let's say that al browsers have the same font-size and users can't change their font-size, in essential we could use px instead, correct? Assuming, 1 rem = 16px, Instead of writing 2em, we can write 32 px.

Also! does zooming in our change the browser's font size? If I recall, browsers these days make sure absolute units are also scalable when zooming in or out, so it doesn't matter if you use px or rem in terms of zooming.

2 Answers

Liam Clarke
Liam Clarke
19,938 Points

Hi Matthew

Although you could replicate the scaling on REM, it doesn't necessarily work that way so setting your base size to 16px ( 1 rem ) and and setting a header to 32px( 2 rem ), is'nt actually scalable, as well as px does not actually equal physical pixels being displayed on a screen.

The main reason for using rem is scaling to multiple screen sizes, given that web content is viewed on anything from mobile devices to 60" screens, we need our content to scale reliably.

It would take dozens of media queries to ensure that all the pixels on a page scaled correctly as well as making the css file HUGE, so one way we get around this is to have a base size and then scale everything off that.

Heres two simplified examples:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>

    <div class="header">
      <h1 class="header__title">Title</h1>
      <p class="header__text">Some text</p>
    </div>

  </body>
</html>

On mobile devices we decide for a better user experience we need to reduce all the content so it fits better and looks more visually appealing, if we used pixels that would mean adding every class selector to a media query and manually reducing its pixels, however with rem we change the base size and everything will scale to that.

html {
    font-size: 16px;
}

.header {
    padding: 2rem;
}

.header__title {
    font-size: 2rem;
}

.header__text {
    font-size: 1rem;
}

@media only screen and (max-width: 600px) {

    html {
        font-size: 14px;
    }
}

And here is with pixels

html {
    font-size: 16px;
}

.header {
    padding: 32px;
}

.header__title {
    font-size: 32px;
}

.header__text {
    font-size: 16px;
}

@media only screen and (max-width: 600px) {

    html {
        font-size: 14px;
    }

    .header {
        padding: 24px;
    }

    .header__title {
        font-size: 24px;
    }

    .header__text {
        font-size: 14px;
    }
}

As you can see the css file starts to get a lot bigger and harder to maintain when trying to get the same affect as rem

Hope this helps!

Matthew Francis
Matthew Francis
6,967 Points
Matthew Francis
Matthew Francis
6,967 Points

My mind is officially blown! thank you! So regardless of the screen size (mobile/tablet/desktop), chrome's default font size is going to always be 16 px and it is our responsibility to change it for different screens? I thought that chrome or any browser scale down the font size for smaller screen.

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Yes, you are right, all browsers do have a default but you will come across a file typically named normalize or reboot that will ensure that all browser defaults are the same allowing for predictable results.

Yes I believe chromes is, but I would recommend whenever using rem to have a "normalize" bit of CSS that will set the base sizes, that way you know that it will be the same across all browsers.