Units Comparison

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="controls">
  <label>
    <span>Base font-size</span>
    <input type="number" value="100" id="base-font" /> %
  </label>
</div>

<div class="container pixels-parent">
  This container is 20 pixels
  <div class="container pixels-child">
    This container is 10 pixels
    <div class="container pixels-child">
      This container is 10 pixels
    </div>
    <div class="container pixels-child-2">
      This container is 20 pixels
    </div>
  </div>
</div>

<hr/>

<div class="container percent-parent">
  This container is 100 percent
  <div class="container percent-child">
    This container is 80 percent
    <div class="container percent-child">
      This container is 80 percent
    </div>
    <div class="container percent-child-2">
      This container is 100 percent
    </div>
  </div>
</div>

<hr/>

<div class="container em-parent">
  This container is 1 em
  <div class="container em-child">
    This container is 0.7 em
    <div class="container em-child">
      This container is 0.7 em
    </div>
    <div class="container em-child-2">
      This container is 1 em
    </div>
  </div>
</div>

<hr/>

<div class="container rem-parent">
  This container is 1 rem
  <div class="container rem-child">
    This container is 0.7 rem
    <div class="container rem-child">
      This container is 0.7 rem
    </div>
    <div class="container rem-child-2">
      This container is 1 rem
    </div>
  </div>
</div>

CSS

body {
  padding-top: 50px;

  font-family: arial, helvetica, san-serif;
}

hr {
  margin: 20px 0;
  border: 0;
  background: #CCC;
  height: 1px;
}

.controls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
  
  font-size: 20px;
  background: #FFF;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.container {
  background: rgba(0, 0, 155, 0.2);

  padding: 10px;
  margin-top: 10px;
}

.pixels-parent {
  font-size: 20px;
}

.pixels-child {
  font-size: 10px;
}

.pixels-child-2 {
  font-size: 20px;
}

.percent-parent {
  font-size: 100%;
}

.percent-child {
  font-size: 80%;
}

.percent-child-2 {
  font-size: 100%;
}

.em-parent {
  font-size: 1em;
}

.em-child {
  font-size: 0.7em;
}

.em-child-2 {
  font-size: 1em;
}

.rem-parent {
  font-size: 1rem;
}

.rem-child {
  font-size: 0.7rem;
}

.rem-child-2 {
  font-size: 1rem;
}

JavaScript

$(function() {
	$('#base-font').on('change', function(e) {
    console.log(e);
  	$('html').css('font-size', e.target.value + '%');
  });
});