Permanent Tourist

A personal website by Mark Howells-Mead

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.