CSS 你到底有多少長度單位？

博客連接 歡迎來訪~

據說糙着幹活的只靠 px 和 % 闖天下，不知道在看文章的你是否是也是其中一員，哈哈哈哈

都 9102 年了，移動端 em 和 rem 霸佔天下，總會有人問你二者的區別；vw 和 vh 也展露頭角，擁護者與日俱增；css3 中還有新增的計算函數 calc() ，又或是 CSS 變量再配合 JS，真的是愈來愈強大了！

em 和 rem

em 和 rem 是配合 flexible 方案很是火的一種相對單位， 雖然該方案已經涼了，但依然是當前兼容性最好的可伸縮佈局方案。

從 em 和 rem 的含義上來講，

• 1em 表示與當前元素字體的寬度，準確來講是一個大寫字母M的寬度

• 1rem 則表示默認字體大小的寬度，一樣實質上也是一個大寫字母M的寬度

二者的差異只是 rem 老是以根節點 (html) 的字體大小做爲參考，你看命名 rem 就是 root em，而 em 則以當前元素的字體大小做爲參考。

而 flexible 方案的實質，就是 hack 實現根據不一樣設備 dpr ，動態改寫 標籤以及 標籤的 data-dpr 屬性 和 font-size 值。這樣達到的效果就是不一樣設備分辨率下界面上內容是徹底等比縮放的。

 

另外一樣以相對字體大小的單位還有 ex 、ch，雖然它們兩位通常不被使用 ..

• 1ex 表示一個小寫字母 x 的高度。但它的表現不像 em 那樣穩定， 好比在 IE 下 ex 正好是 em 的一半，在火狐下更接近字體的實際高度，因此咱們一半認爲 ex ≈ em / 2 。

• 1ch 表示一個數字 0 的寬度。

 

它們的兼容性以下

視口比例單位 vh、vw、vmin、vmax

在 css3 中新增了和 Viewport 相關的四個單位，隨着時間推移，目前各瀏覽器環境也能跟上了，這也是當前/將來最建議的在伸縮方案中用的單位。前面提到的 flexible 方案也正是對低版本環境兼容視口比例方案的一種 JS hack 方案。

• 1vw 表示視口寬度的 1/100

• 1vh 表示視口高度的 1/100

• 1vmin 取 1vm 和 1vh 較小的一者

• 1vmax 取 1vm 和 1vh 較大的一者

！視口寬高對應 window.innerWdith 和 window.innerHeight

而當前的兼容性以下：

CSS3 其餘新特性的搭配使用

從幾個案例來研究下

1. 搭配 calc() 計算

.box {
    width: calc(100vw - 40px);
    padding: 0 20px;
    box-sizing: border-box;
}
複製代碼

2. CSS 變量 與 JS 搭配使用

切換主題直接改 css 中的變量

function changeTheme (color) const docStyle = document.documentElement.style; docStyle.setProperty('--theme-color', color); } 複製代碼

--theme-color: '#fff'

.some-dom {
    color: var(--heme-color);
}
複製代碼

絕對單位

在絕對單位中，最經常使用的必定是 px 了，它究竟爲何如此好用？它究竟是絕對單位仍是相對單位？

px 咱們稱之爲像素，即屏幕圖形顯示的一個點（最小單位），這個點有它的位置、顏色等信息，從這個意義上來講 px 是絕對單位；但每一屏幕上的最小單位1像素對應物理單位是能夠變化的，好比1px=1mm、1px=1cm，這取決於設備，因此也會有說它是相對單位的狀況。

 

其餘絕對單位還有:

• mm 毫米
• cm 釐米
• in 英寸（2.54釐米）
• pt 磅（1/72 英寸）
• pc 12 點活字 (1 pc 等於 12 點)

一般來講這些絕對單位用於打印一類現實物質的尺寸需求

總結

實際項目中，咱們不可能也不該該僅使用單一的單位來處理全部的細節，充分認識各單位的意義，合理結合纔是最好的。

等比伸縮佈局不是萬能的，讓 ipad 和 iphone 顯示徹底同樣的等比放大的內容自己就是偷懶的方案，如何設計好自適應和響應式的結合是產品線從設計開始就得考慮的內容。

em 方案和 vxx 方案總歸要從設計稿的 px 換算到單位，實際開發中精細的調節仍是得靠 px ，最後纔再換算過去，不如直接規範好設計稿、作好代碼轉化插件，代碼全用 px ，流程化搞定單位問題。

參考資料

• 再聊移動端頁面的適配
• <length> in MDN