em 和 rem 及他們的使用方法
關於 px
em示例一
示例二示例三
示例四rem總結
在介紹 em 和 rem 之前，想簡單介紹一下 px（這裡指的是 css 中的 px，請先記住這一點。如果你
已經對 px 有所了解可以直接跳到第二節閱讀）。我們知道 px 是乙個絕對單位，絕對單位的意義就
好比座標系中的原點，在確定了（0, 0)位置之後，我們才能得知座標（x，y）所表示的位
置。同樣這裡的 1px 的意義就好比是國際單位制 1m 所表示的意義。當我們對別人說這張床的
長度是 1m 時，他們就能大體了解到那張床的長度。在 css 中我們用 px 來表示物體的長度。如
瀏覽器的寬度，高度等。
讓我們來一起了解一下 css 中的 px 和通常我們所說的**中的畫素 px 的一些聯絡和區別。這
裡我們暫時將 css 中的 px 稱為 cpx，而將**中的 px 稱為 px。
我們知道，不同的裝置之間存在解析度的差別。同樣螢幕尺寸大小的高解析度裝置 a 和低
解析度裝置 b 由於解析度不同，所導致的最直觀的感受就是 a 所顯示的字型和要比 b 所
顯示的清晰。如果我們拿放大鏡來觀察兩個裝置（開玩笑⌣），會發現同樣區域大小裡面 a 的
畫素點的個數要比 b 的多。不嚴謹的計算一下，畫素大小（px）＝ 區域面積 / 畫素個數。
發現 a 的畫素要比 b 的小。如果我們把 cpx 和 px 等價，結果是如果在 a 和 b 中都設定了
font-size=10px,那麼 a 顯示的字型會比 b 的小。此時如果我們想讓 a 和 b 的字型大小相同，就需
要將 a 的 font-size 設定的大一些。同樣，在同一臺裝置上通過 ctrl+`+`和 ctrl+`-`來調整窗
口的收縮，也是在調整裝置的解析度。
px 的一些使用場景：
上面提到的內容可以概括為兩點：
px 是絕對單位，用做 css 中大小或長度的基準。
由於裝置間解析度的不同，px 在不同裝置上體現的實際大小會有所差別。
對於 px 我們可以將其同國際制單位 1m 所象徵的含義一樣對待。而不用太糾結於它的實際大小。
看到這裡，大家可能有點累了，稍微休息一下後，我們一起繼續後面的內容吧！
em 是相對單位。具體涵義讓我們先看幾個例子吧！
css
body
ul
font-size
答案分別為 10px 和 10px * 50% = 5px
css
body
ul
one -> 20px * 80%; two -> 20px * 80% * 80%;
three -> 20px * 80% * 80% * 80%;
從上面的例子可以看到子元素的 font-size 如果用 em 來表示，會由其父元素的 font-size 大小
來進行計算。結果是 ul 內的字型越來越小了。
接下來讓我們再看乙個例子：
css
body
p
width
font-size（20px）* 2?
答案是 20px * 2
看到這裡，大家應該注意到了，padding 屬性當使用 em 作為單位時，是使用自己的 font-size
值為計算基準的，類似的屬性還有border,border-radius。
最後再看乙個示例：
css
ppadding
預設字型大小一般設定為 16px，從而 p 元素從其繼承而來的 font-size 是 16px。
在這裡 padding 為 16px * 2 = 32px
在示例 2 中我們看到在巢狀中使用 em 的一些缺點，為此我們可以結合使用 rem。rem 的計算基
準是根節點的 font-size 大小。即通常的 html 標籤或 :root 裡面設定的字型大小。如：
css
html
/* 或者是
:root
*/ul
讓我們一起回顧一下 em 和 rem：
em 和 rem 均為相對單位
當 em 和 rem 作為單位用在 padding，border，border-radius 等屬性上時，
em 的計算基準為本元素的 font-size。rem 的計算基準為根元素的 font-size
瀏覽器的預設字型大小為 16px
css中單位em和rem
w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。在 css 中，em 是非常有用的單位，因為它可以自動適應使用者所使用的字型。...
css中單位em和rem
w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。在 css 中，em 是非常有用的單位，因為它可以自動適應使用者所使用的字型。...
css中單位em和rem
w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。在 css 中，em 是非常有用的單位，因為它可以自動適應使用者所使用的字型。...