CSS單位講解
阿新 • • 發佈：2019-09-23
像 px、rem、em、% 這樣的長度單位大家肯定都很熟悉，前者為絕對單位，後者為相對單位。CSS3 又引入了新單位：vw、vh、vmin、vmax。下面對它們做個詳細介紹。
| 單位 | 作用 | 特性 |
|---|---|---|
| px | 頁面按精確畫素展示 | 絕對單位 |
| rem | 相對根節點html字型大小來計算 | 相對單位 |
| em | 基準點為相對父節點字型的大小 | 相對單位 |
| % | 相對於父元素的大小設定的比率 | 相對單位 |
| vw | 視窗寬度的百分比，1vw代表視窗寬度的1% | 視窗單位 |
| vh | 視窗高度的百分比，1vh代表視窗高度的1% | 視窗單位 |
| vmin | 當前vw和vh中較小的一個值 | 視窗單位 |
| vmax | 當前vw和vh中較大的一個值 | 視窗單位 |
tip：vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。 假如給頁面設定一個寬800px，則400px=50vh=50%。
一、px、em和rem的區別
px是固定的畫素，一旦設定了就無法因為適應頁面大小而改變。
em和rem相對於px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用於響應式佈局。
對於em和rem的區別一句話概括：em相對於父元素，rem相對於根元素。
rem中的r意思是root（根源），這也就不難理解了。
二、vw、vh 與 % 百分比的區別
% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。
vw、vh 優勢在於能夠直接獲取高度，而用 % 在沒有設定 body 高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。
三、vmin、vmax 用處
做移動頁面開發時，如果使用 vw、wh 設定字型大小（比如 5vw），在豎屏和橫屏狀態下顯示的字型大小是不一樣的。 由於 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裡就可以用到 vmin 和 vmax。使得文字大小在橫豎