PX、EM、REM

 

🚩 尺寸單位

在寫網頁式常用的尺寸單位有 PX、EM、REM。

PX 使用上很直觀，是相對容易入門的單位。

EM、REM 是依照比例做計算，在做響應式網頁有優勢。

🚩 PX

Pixel 是一般最常見的網頁設計單位，他是「絕對數值」，
也就是設定多少就顯示多少。

如果要做到響應式網頁時變成需要個別做字體大小的調整。

🚩 EM

比例會受到外層父元素影響，例如：

wrap1 font-size 設定 16px，
wrap2 font-size 設定 2em 的話就代表 32px(16px × 2 = 32px)，
wrap3 font-size 設定 1em 的話就代表 32px(32px × 1= 32px)。

🚩 REM

比例會依照最外層的 html 標籤影響，例如：

html 標籤 font-size 設定 16px，
wrap1 font-size 設定 20px，
wrap2 font-size 設定 2rem 的話就代表 32px(16px × 2 = 32px)，
wrap3 font-size 設定 1rem 的話就代表 16px(16px × 1 = 16px)。

來源