這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【px、em、rem、%、vw、wh、vm等單位有什麼區別？】 1.背景介紹傳統的項目開發中，我們只會用到px、%、 ...
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【px、em、rem、%、vw、wh、vm等單位有什麼區別？】
1.背景介紹
傳統的項目開發中，我們只會用到px、%、em這幾個單位，它可以適用於大部分的項目開發，並且擁有比較良好的相容性。但是你知道嗎？從css3開始，瀏覽器對邏輯單位的支持又提升到了另外一個境界，增加了rem、vh、vw、vm等一些新的長度單位，我們可以利用這些新的單位開發出比較良好的響應式頁面，隨之覆蓋多種不同解析度的終端，包括移動設備等。現在讓我們來看下這些長度單位有什麼區別。
2.知識剖析
1、px
px就是pixel的縮寫，意為像素。px就是一張圖片最小的一個點，一張點陣圖就是千千萬萬的這樣的點構成的，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。
相容性：
2、em
參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器預設字體是16px），整個頁面內1em不是一個固定的值。
相容性：
3、rem
css3新單位，相對於根元素html（網頁）的font-size，不會像em那樣，依賴於父元素的字體大小，而造成混亂。
相容性：
4、%
一般寬泛的講是相對於父元素，但是並不是十分準確。
1、對於普通定位元素就是我們理解的父元素
2、對於position: absolute;的元素是相對於已定位的父元素
3、對於position: fixed;的元素是相對於ViewPort（可視視窗）
相容性：
3、vw
css3新單位，viewpoint width的縮寫，視窗寬度，1vw等於視窗寬度的1%。
舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
相容性：
4、vh
css3新單位，viewpoint height的縮寫，視窗高度，1vh等於視窗高度的1%。
舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。
相容性：
4、vm
css3新單位，相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm
舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。
由於現在vm的相容性較差，這裡就不做展示了。
你隨便轉，比例變了算我輸
3.常見問題
vh vw vm實際應用場景？
4.解決方案
vh vw是不包含頁面滾動條的視窗寬度(innerwidth)，%包含了滾動條的寬度在裡面了(outerwidth)。
一般的情況下%就可以滿足大部分自適應設計的需求，可以用height：100vh做一個高度占滿屏幕的自適應，沒有滾動條。
用vw，vh設定的大小隻和視窗大小有關，所以用來開發多種屏幕設備的應用用這個單位還是挺合適的。
5.編碼實戰
點擊這裡
6.擴展思考
css還有哪些長度單位？
in:寸
cm:釐米
mm:毫米
t:point，大約1/72寸
pc:pica，大約6pt，1/6寸
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
7.參考文獻
參考一：你知道這7個css單位麽
參考二：CSS長度單位值測試實例頁面
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。
這裡是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到互聯網行業的聚集地。"
歡迎加IT交流群565734203與大家一起討論交流
