大家好柱蟀，我是IT修真院萌新分院的王寒川蒙，一枚正直，純潔长已，善良的前端程序員畜眨。
1.背景介紹
傳統(tǒng)的項目開發(fā)中，我們只會用到px术瓮、%康聂、em這幾個單位，它可以適用于大部分的項目開發(fā)胞四，并且擁有比較良好的兼容性恬汁。但是你知道嗎？從css3開始撬讽，瀏覽器對邏輯單位的支持又提升到了另外一個境界蕊连，增加了rem、vh游昼、vw甘苍、vm等一些新的長度單位，我們可以利用這些新的單位開發(fā)出比較良好的響應式頁面烘豌，隨之覆蓋多種不同分辨率的終端载庭，包括移動設備等。現(xiàn)在讓我們來看下這些長度單位有什么區(qū)別廊佩。
2.知識剖析
1囚聚、px?
px就是pixel的縮寫，意為像素标锄。px就是一張圖片最小的一個點顽铸，一張位圖就是千千萬萬的這樣的點構(gòu)成的，比如常常聽到的電腦像素是1024x768的料皇，表示的是水平方向是1024個像素點谓松，垂直方向是768個像素點。
2践剂、em
參考物是父元素的font-size鬼譬，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px）逊脯，整個頁面內(nèi)1em不是一個固定的值优质。
3、rem
css3新單位军洼，相對于根元素html（網(wǎng)頁）的font-size巩螃，不會像em那樣，依賴于父元素的字體大小匕争，而造成混亂牺六。
4、%
一般寬泛的講是相對于父元素汗捡，但是并不是十分準確淑际。 1、對于普通定位元素就是我們理解的父元素 2扇住、對于position: absolute;的元素是相對于已定位的父元素 3春缕、對于position: fixed;的元素是相對于ViewPort（可視窗口）
5、vw
css3新單位艘蹋，viewpoint width的縮寫锄贼，視窗寬度，1vw等于視窗寬度的1%女阀。 舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px宅荤。
6屑迂、vh
css3新單位，viewpoint height的縮寫冯键，視窗高度惹盼，1vh等于視窗高度的1%。 舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px惫确。
7手报、vm?
css3新單位，相對于視口的寬度或高度中較小的那個改化。其中最小的那個被均分為100單位的vm 舉個例子：瀏覽器高度900px掩蛤，寬度1200px，取最小的瀏覽器高度陈肛，1 vm = 900px/100 = 9 px揍鸟。
3.常見問題
vh vw vm實際應用場景？
4.解決方案
vh vw是不包含頁面滾動條的視窗寬度(innerwidth)句旱，%包含了滾動條的寬度在里面了(outerwidth)蜈亩。 一般的情況下%就可以滿足大部分自適應設計的需求，可以用height：100vh做一個高度占滿屏幕的自適應前翎，沒有滾動條稚配。 用vw，vh設定的大小只和視窗大小有關港华，所以用來開發(fā)多種屏幕設備的應用用這個單位還是挺合適的道川。
5.編碼實戰(zhàn)
6.擴展思考
css還有哪些長度單位？
in:寸
cm:厘米
mm:毫米
t:point立宜，大約1/72寸
pc:pica冒萄，大約6pt，1/6寸
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px?
7.參考文獻
PX橙数、EM尊流、REM、%灯帮、VW崖技、VH、VM等單位有什么區(qū)別钟哥？
8.更多討論
css中font-size的單位有px迎献、em、pt 用哪個哪個最好 腻贰？
鳴謝
感謝大家觀看
By?王寒
小課堂問題：
1.詳解vm吁恍。
答案：請點擊。
2.這些單位都是在什么情況下使用？
答案：請點擊冀瓦。
3.使用px的優(yōu)點和缺點?
答案：請點擊伴奥。
