EMs and REMs and CSS media queries

Next to Zell Liew’s blog post about vertical rhythm, there’s also a very interesting – if perhaps complex – post about using EM units in CSS media queries. The principle is based around using relative units for breakpoints instead of fixed pixel widths.

Using fixed pixel widths for media queries is based around the alignment of layout to the pixel-precise dimensions of specific devices. (For example, if the screen width is 375px and the screen height is 667px, then your visitor is probably using an iPhone 6.) This is a dangerous approach, as there are literally hundreds of different devices on the market, each with a different set of pixel dimensions. You’ll never be able to keep your CSS in pace with that number of resolutions, so the challenge is to make the difficult step away from thinking about specific devices, and start thinking about device-independent design.

I’m going to spend time in the near future working on this principle in more detail – primarily for work projects and for a technical improvement of this website. I’m already very familiar with the following principles, which are a good starting point for the journey ahead.

  • The REM unit is relative to the text size of the root <html> element. If this root text size is 20px, and you want a header <h1> in the main column to be 36px, then you can define its size as 1.8rem. Sizing text relative to the root <html> element is a much more stable way of avoiding problems with nested elements.
  • Using the browser’s preference settings, a user can ask for all text on all websites to be displayed larger or smaller than the standard. Sizing your text with REM units means that this browser preference will apply to all elements on the page. Using EMs blocks the correct implementation of this preference.
  • Using Ctrl + or CMD + to zoom the content of the page doesn’t work in the same way as changing the browser preference. This zoom method only works on a temporary basis – next time you open a new browser window or tab, the zoom setting is back to 100%.
  • EM units are relative to the containing element. Setting a font size of 20px on the <main> content element and then a size of 0.8em on a direct descendent of that element will make the direct descendent size 16px. If you nest a <div> inside a <div> inside that <main> element, and define .main div {font-size 0.8em}, then the outer div’s text will be 16px, while the inner div will be 12.8px, and so on.

Leave a comment

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Previous comments

  1. I need to use rem more often as well. Especially the linked article on zellwk.com called my attention to this topic. I like the argument about em and the effect of nested containers.
    I must confess, sometimes when I design in the browser I don’t do the math, just use the em unit and my visual judgement. This sometimes causes not the most beautiful pixel amounts. With using rem the math would be easier as well.

    Reply
    • Mark Howells-Mead

      …and if you use Sass mixins like rem-calc, you don’t even need to do any manual calculation!

      Reply