【HTML、CSS教學】15. 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)。

💡 tips: wrap3 會受到外層父元素 wrap2 的影響，而不是 wrap1。

🚩 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)。

💡 tips: rem受到 html 標籤設定影響

🚩 CodePen 範例

範例中分別舉例了 PX、EM、REM所呈現出來的效果。

三者所呈現的最終結果是一樣的，但 PX 是直接寫死數值，
而EM、REM 是參照數值按比例計算出來。

① EM

因為 EM 是受到外層父元素的影響，
因此在 .demo2 .content span 要顯示 16px 時，
計算的方式為：

demo2 尺寸 × demo2.content 尺寸 × demo2.content.span 尺寸 = 16px
24px × 0.5 × demo2.content.span 尺寸 = 16px
demo2.content.span 尺寸 = 1.333em

② REM

因為 REM 是受到 html 標籤設定影響，
因此在 .demo3 .content span 要顯示 16px 時，
計算的方式為：

hmtl 標籤尺寸 × demo3.content.span 尺寸 = 16px
24px × demo3.content.span 尺寸 = 16px
demo3.content.span 尺寸 = 0.667rem