關於前端設計的EM單位（字體大小）探究

一、什麼是EM單位

（代碼示例）

    <style type="text/css">
        .em1{
            font-size:1em;
        }
        .em2{
            font-size:2em;
        }
        .em3{
            font-size:3em;
        }
    </style>
    <p class="em1">這是1em字體大小</p>
    <p class="em2">這是2em字體大小</p>
    <p class="em3">這是3em字體大小</p>

EM單位是指相對於父元素的字體大小進行調整的單位。在CSS中，1em等於父元素的字體大小。因此，em單位可以用來實現響應式網頁設計，便於調整字體大小和網頁布局。

二、使用EM單位的優缺點

（代碼示例）

    <style type="text/css">
        .em{
            font-size:1em;
        }
        .px{
            font-size:16px;
        }
    </style>
    <p class="em">這是1em字體大小</p>
    <p class="px">這是16px字體大小</p>

使用EM單位的優點是，可以根據父元素的字體大小來進行相對調整，便於響應式網頁設計。而且EM通常也是Web開發中最合適的單位之一，因為它們不像像素那樣，對於高分辨率屏幕表現不佳。另外，當用戶對瀏覽器字體大小進行調整的時候，使用EM單位的網頁也可以相應進行調整。

但是，使用EM單位也存在一些缺點。因為EM單位通過繼承父元素的字體大小，所以當嵌套多個元素的時候，很容易造成字體大小不必要的擴大或縮小。

三、使用REM單位解決嵌套問題

（代碼示例）

    <style type="text/css">
        body{
            font-size:16px;
        }
        .rem1{
            font-size:1rem;
        }
        .rem2{
            font-size:2rem;
        }
        .rem3{
            font-size:3rem;
        }
    </style>
    <p class="rem1">這是1rem字體大小</p>
    <p class="rem2">這是2rem字體大小</p>
    <p class="rem3">這是3rem字體大小</p>

為了解決EM單位存在的嵌套問題，REM單位應運而生。REM單位是指相對於根元素html的字體大小進行調整的單位。因為根元素的字體大小是固定的，不會因為父元素字體大小改變而改變，所以使用REM單位可以有效避免字體大小的嵌套問題。當然，在設置REM的時候，需要先對根元素的字體大小進行設置。

四、小結

通過對EM、REM單位進行介紹，我們了解了它們與字體大小的關係，以及使用它們的優缺點。在實際應用中，我們可以根據頁面需要，來選擇合適的字體大小單位，從而達到更好的排版效果。