在做移動端適配的時候，很多人第一反應就是使用 rem ，通過動態設定 html 上的 font-size 來進行頁面的自適應，基本原理就是 rem 表示的是 root em ，頁面中所有的值都是基於html上的 font-size ，相對的進行對應的變化

尤其是智慧手機出現之後，我們沒有辦法在去固定我們的裝置寬高，需要考慮 響應式 設計，根據瀏覽器視窗大小有不同的佈局方式

css 中的單位

絕對單位

單位分為絕對單位和相對單位，其中絕對單位有 px、mm、cm、in、pt、pc 這些都可以相互轉換

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

當然我們還需要知道的是，css 雖然是一個絕對單位，但是它並不等於顯示器的畫素，需要通過 dpr 進行換算

最常見的相對單位是 em 和 rem

em

1em 表示的是當前元素的字號，可以看到 1em 是 16px，因為當前元素的 font-size 是 16px，瀏覽器會根據相對單位 em 計算出絕對單位 px，所以當你改變了這個元素的 font-size，其對應的 padding 也會隨之變化，設定 padding、height、width、border-radius 這些屬性的時候，使用 em 很方便，會動態根據 font-size 變化

那既然元素的 em 是根據當前元素的 font-size 來的，那給當前元素設定 font-size 使用 em ，那對應的值是什麼呢？

可以看到，目前 font-size 變成了 32px ，為了得到 font-size 的值，需要參考繼承的字號。這個時候如果設定了 padding 的值也是 2em ，雖然 font-size 和 padding 都是 2em ，但是它們的值是不一樣的，padding 的大小為 64px ，font-size 先取到，然後根據 font-size 計算出padding

這裡增加了計算的複雜性，所以一般font-size我們給固定的值就好，否則就會多層巢狀導致最終的結果不符合預期，所以如果不小心使用 em ，會讓 em 很難按照我我們預想的來

所以我們有更好用的 rem

rem

在 html 文件中，根節點是所有其它元素的祖先，:root 表示根節點的偽類選擇器，可以用來選中 html ，html 型別選擇器和 :root 偽類選擇器優先順序是有區別的

rem 是 root em 的縮寫，rem 不是相對於當前元素，而是相對於根元素，所以，不論什麼位置，使用 rem 單位都是相對於根元素的 font-size

實際使用的選擇性

既然 rem 這麼好用，並且不存在 em 那麼複雜的計算邏輯，是不是在專案中我們都用 rem 就好了呢？當然實際在專案中想必大家都是 rem 梭哈，這裡我總結了一些適用場景

rem 一般情況下就是用來設定 font-size ，px 設定邊框，em 設定絕大部分屬性，比如padding margin border-radio 等等，這樣統一的字號標準，讓頁面不論是縮放還是適配都遊刃有餘，所以當你拿捏不準使用什麼方式來設定一些元素的時候，就按照上述的來，一般是沒有什麼問題的

使用 js 設定根元素 rem

自從有了 rem 這個便捷的相對單位，我們就有了一些奇怪的操作，比如用 js 設定根元素大小這個操作，就是將網頁的根元素字號根據螢幕的大小動態設定為一個固定值，然後在頁面中根據 ui 給出的圖，換算成 rem 值，進行各種適配

甚至衍生出了一些 px 轉換成 rem 的外掛，當然這些做確實有些方便，但是不可否認的是它也有一定的問題

1. 當螢幕小的時候，font-size 的大小會變成 10px ，但是我們好多系統最小字也就是 12px ，10px 展示有問題，導致我們需要給所有的元素上設定 至少為 1.2rem 才能保證顯示正常
2. 當螢幕過大的時候，比如移動端轉到 pc 端，頁面的根元素 font-size 又會變的很大，感官上根本不能用

實際應用

用以上所學，我們建立一個標題帶段落的說明

```html

```

這確實是會增加我們一些工作量，因為你需要思考什麼時候使用 em ，什麼時候使用 rem 以及 px 之間相互切換，但是好處也是很明顯的

如果你想要將當前的內容做一個響應式

只需要這樣

```css @media (min-width: 800px){ :root{ font-size: 1em } }

@media (min-width: 1200px){ :root{ font-size: 1.2em } } ```

隨著螢幕的變化，字號逐漸增加，即便是對一個元件進行不同的自適應，你只需要更改對應元件的 font-size 即可

當然 css 中相對單位還有常見的內容

視口相對單位

• vh: 視口高度的1/100
• vw: 視口寬度的1/100
• vmin: 視口寬度或者高度中較小的一方1/100
• vmax: 視口寬度或者高度中較大的一方1/100

50vh 也就是視口高度的一半

剛才我們使用媒體查詢定義了根元素 font-size ，當頁面寬度變化到指定畫素的時候會突然變成我們設定的內容，現在既然有了 vw ，是不是可以使用 vw 進行設定，視口改變時，元素自然過渡

實踐一下

css :root{ font-size: 2vw }

這樣在小螢幕上因為有最小字號限制，所以能夠展示最小 12px 的字，但是螢幕一旦變大，導致字號也跟著變大，變小雖然字能看，但是邊距會隨之減小到很小的程度

有沒有什麼辦法呢？

calc

calc 大家基本都用過，它可以對兩個以及以上的值進行基本運算，比如calc(1em + 10px)，支援加減乘除

對於根節點，為了保證最小值，我們可以這樣

css :root{ font-size: calc(0.5em + 1vw) }

這樣能保證最小值，也不至於螢幕大了字號過大，做了一個較好的適配

總結

這就是使用現代 css 的是配置方式

1. 更多的使用相對單位來設定一些屬性
2. rem 設定字號，em 設定額外內容，px 設定邊框
3. 使用 calc+vw 也能做好一般自適應

既然有很多人討論這個問題，我覺得我有必要補充一下

第一點：對於 rem 來說，全域性使用當前看是沒有什麼問題，但是大家可以思考一下，使用了 rem，本質就是你的網站在不同的螢幕上縮放，在移動端還好，如果一旦放到 pc 端，那效果大家想必都很清楚，那麼大的螢幕看到的內容有可能還沒有移動端的多，這純粹是一種偷懶的方式，只是把移動端放大而已

第二點：通篇 rem，根節點的 font-size 是變化的，之後頁面中所有字型大小的部分都不能繼承預設值，需要手動全部改成想要的字型大小

第三點：三方元件，比如富文字編輯器，寫出來的內容是px的，和 rem 的內容格格不入，除非你用一些特殊的方式將其隔離（比如iframe）

第四點：文章的重點還是希望能夠配合 em、vw、px、calc 等方式去處理一些邏輯，元素的字型大小根據 rem 設定，這樣動態改變 rem 的大小，就能夠讓 em 動態適應

第五點：現代佈局通過 flex + vw 等方式已經足夠解決大部分問題了，雖然有一些計算成分，不同的裝置下，我想看到的是更多的內容而不是更大的字

說到底還是需要掌握 flex、grid 等現代佈局的方式

當然我的標題確實存在一定的問題，給大家道歉，本意還是希望能夠在適配上給大家一些幫助，如果沒有幫到你，嘴下留情，劃出去即可，如果幫到你了，讓你對這些單位有了更深的認識，專案中能夠使用更好的方式和思考，那就沒白寫