Introduction to REM and Responsive Development
If you are a web developer, you know the importance of creating a truly responsive layout for your users. Many developers attempt to utilize REM in their source code for responsiveness; but often combine it with a combination of pixels, percentages, and breakpoints for a hybrid approach that takes much of the architectural value out of fully-REM based implementations.
Rem (short for “root-em”) units dictate an element’s font size relative to the size of the root element. By default, most browsers use a font size value of 16px. So, if the root element is 16px, an element with the value 1rem will also equal 16px. Therefore, rem units are useful for scaling CSS elements in relation to the size of the root element — even if you don’t know what the default font size will be.
If this is you; fear not! In this guide we’ll show you how to create a responsive architecture pattern around a single declaration of font-size in your root document. This will allow you to reduce code duplication and have more clarity in your development initiatives moving forward.
Here’s what we’ll cover:
- What is REM, and why is it important?
- How to set your root font-size
- How to convert your CSS Breakpoints to be responsive
- How to implement CSS linting standards to make sure you remove pixels from the equation.
At the conclusion of this guide, we’re confident that you’ll not only understand REM; but also that you’ll be able to create more meaningful contributions to your team and your source code that will save time, money, and keep that hair on your head!
