部落格連結 歡迎來訪~
聽說糙著幹活的只靠 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 英寸）pc12 點活字 (1 pc 等於 12 點)
通常來說這些絕對單位用於列印一類現實物質的尺寸需求
總結
實際專案中，我們不可能也不應該僅使用單一的單位來處理所有的細節，充分認識各單位的意義，合理結合才是最好的。
等比伸縮佈局不是萬能的，讓 ipad 和 iphone 顯示完全一樣的等比放大的內容本身就是偷懶的方案，如何設計好自適應和響應式的結合是產品線從設計開始就得考慮的內容。
em 方案和 vxx 方案總歸要從設計稿的 px 換算到單位，實際開發中精細的調節還是得靠 px ，最後才再換算過去，不如直接規範好設計稿、做好程式碼轉化外掛，程式碼全用 px ，流程化搞定單位問題。
