<commit_before>---
layout: post
title: "Responsive CSS with REMs & EMs"
author: <NAME>
date: 2017-06-25 23:30:00 -04:00
categories: blog
tags: html css responsive
description: ""
comments: true
---

Amongst several extremely useful features, CSS3 brought us REMs & EMs - two responsive-minded measurement units. In my experience, these units tend to be more predictable and adaptable than the usual style of pixels and percents though those are still good for things such as border-widths and the like. Today I'll outline exactly what REMs & EMs are, their journey to cross-browser support, and the benefits in using them.

### What are REMs & EMs
In this instance, the dictionary definition does a lot of good to know and rounds out a ground floor to come in on.

* REM: stands for the text size of the root element on the webpage.

* EM: historically, em was a measurement based on the width of the capital M letter. In modern web design, it is more commonly equated to roughly 16 pixels.

Now, in layman's terms: a REM is based on whatever root text size you're using in your HTML selector. On the other hand, an EM inherits from what comes before it. Consider the following:

```html
html { font-size: 100%;} // FYI: in most browsers 100% = 16px;
body { font-size: 20px;}

.first { font-size: 1rem; }
.second { font-size: 1em; }

<html>
  <body>
    <div class="first">
      <p>I'm using REMs here which rely on the root element</p> 
    </div>
    <div class="second"><commit_msg>added in description for latest post<commit_after>---
layout: post
title: "Responsive CSS with REMs & EMs"
author: <NAME>
date: 2017-06-25 23:30:00 -04:00
categories: blog
tags: html css responsive
description: "Amongst several extremely useful features, CSS3 brought us REMs & EMs - two responsive-minded measurement units. In my experience, these units tend to be more predictable and adaptable than the usual style of pixels and percents though those are still good for things such as border-widths and the like. Today I'll outline exactly what REMs & EMs are, their journey to cross-browser support, and the benefits in using them."
comments: true
---

Amongst several extremely useful features, CSS3 brought us REMs & EMs - two responsive-minded measurement units. In my experience, these units tend to be more predictable and adaptable than the usual style of pixels and percents though those are still good for things such as border-widths and the like. Today I'll outline exactly what REMs & EMs are, their journey to cross-browser support, and the benefits in using them.

### What are REMs & EMs
In this instance, the dictionary definition does a lot of good to know and rounds out a ground floor to come in on.

* REM: stands for the text size of the root element on the webpage.

* EM: historically, em was a measurement based on the width of the capital M letter. In modern web design, it is more commonly equated to roughly 16 pixels.

Now, in layman's terms: a REM is based on whatever root text size you're using in your HTML selector. On the other hand, an EM inherits from what comes before it. Consider the following:

```html
html { font-size: 100%;} // FYI: in most browsers 100% = 16px;
body { font-size: 20px;}

.first { font-size: 1rem; }
.second { font-size: 1em; }

<html>
  <body>
    <div class="first">
      <p>I'm using REMs here which rely on the root element</p> 
    </div>
    <div class="second">
{'fraction_non_alphanumeric': 0.07548273844353423, 'fraction_numerical': 0.01960210649502633, 'mean_word_length': 3.9336219336219336, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1456933', 'n_tokens_mistral': 1018, 'n_tokens_neox': 926, 'n_words': 526}