REM CSS EM CSS

by Bang Nguyen

HTML

<h2>REM CSS</h2>

<div class="rem_example">
<h3>Cách tính kích thước rem:</h3>
<ul>
  <li><h1>1 rem = 16px</h1</li>
  <li><p>0.5 rem = 8px</p></li>
  <li><small>2 rem = 32px</small></li>
</ul>
</div>
<hr/>
<h2>EM CSS</h2>
<div class="em_example">
  <h3>Cách tính em:</h3>
  <ul>
  <li><h1> Panpic </h1</li>
  <li><p> Panpic </p></li>
  <li><small> Panpic </small></li>
</ul>
</div>

CSS

/*REM CSS*/
.rem_example h1 { font-size: 2rem; /* 2 * 16px = 32px */ }
.rem_example p { font-size: 1rem; /* 1 * 16px = 16px */ }
.rem_example small { font-size: 0.75rem; /* 0.75 * 16px = 12px */ }

/*EM CSS*/
.em_example p { font-size: 1em; /* 1 * 16px = 16px */ }
.em_example h1 { font-size: 2em; /* 2 * 16px = 32px */ }
.em_example small { font-size: 0.75em; /* 0.75 * 16px = 12px */ }