1. Em

html 結構

<div id="box-1">
    <h3>Box One</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam assumenda aut, animi sed minima iste omnis magnam dolorum vitae temporibus odio, commodi odit at incidunt? Quas voluptas veniam dicta corporis.
    
 
</p>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3
 
</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>4</li>
    </ul>
  </div>

css 樣式

<style>
    #box-1 {
      font-size: 20px;
    }
    #box-1 p {
      font-size: 1.5em;
    }
    #box-1 ul {
      font-size: 1.2em;
    }
 
</style>

原理

em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

• 1. em的值並不是固定的；
• 2. em會繼承父級元素的字型大小。

注意：任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。

所以我們在寫CSS的時候，需要注意兩點：

• 1. body選擇器中宣告Font-size=62.5%；
• 2. 將你的原來的px數值除以10，然後換上em作為單位；
• 3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明瞭字型大小為1.2em，那麼在宣告p的字型大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字型高而變為了1em=12px。

(不建議使用em)

2. Rem

html 結構

<div id="box-2">
    <h3>Box One</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam assumenda aut, animi sed minima iste omnis magnam dolorum vitae temporibus odio, commodi odit at incidunt? Quas voluptas veniam dicta corporis.
    </p>
  </div>

css 樣式

html {
      font-size: 62.5%;
    }
    #box-2 h3 {
      font-size: 2rem;
    }
    #box-2 p{
      font-size: 1.6rem;
      line-height: 1.7rem;
    }

原理

rem是根據瀏覽器預設的字型來進行更改的

舉例: 預設字型是 16px  那1rem = 16px  2rem = 32px

注意： 選擇使用什麼字型單位主要由你的專案來決定，如果你的使用者群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮相容性，那就使用px,或者兩者同時使用。