大家好目派，我是IT修真院的學員坤候，一枚正直純潔善良的web前端程序員
今天給大家分享一下px、em企蹭、rem白筹、%、vw谅摄、vh徒河、vm等単位有什么區(qū)別？
1.背景介紹
傳統(tǒng)的項目開發(fā)中送漠，我們只會用到px顽照、%、em這幾個單位， 它可以適用于大部分的項目開發(fā)代兵，并且擁有比較良好的兼容性尼酿。 但是從css3開始，瀏覽器對邏輯單位的支持又提升到了另外一個境界植影， 增加了rem裳擎、vh、vw思币、vm等一些新的長度單位鹿响，我們可以利用這些新的單位開發(fā)出比較良好的響應式頁面， 隨之覆蓋多種不同分辨率的終端谷饿，包括移動設備等』涛遥現在讓我們來看下這些長度單位有什么區(qū)別。
2.知識剖析
1.px
px就是pixel的縮寫啦各墨，pixel即像素指孤，它不是自然界的長度單位。 px是就是一張圖片中最小的點贬堵，一張位圖就是由這些點構成的恃轩。 1024px就是1024像素，最簡單的你可以在windows桌面屬性里的“設置”看到黎做， 如果是1024×768叉跛，也就是說水平方向上有1024個點，垂直方向上有768個點蒸殿。 可以畫的很小筷厘，也可以很大。如果點很小宏所，那畫面就清晰酥艳，我們稱它為“分辨率高”， 反之爬骤，就是“分辨率低”充石。所以，像素的大小是會“變”的霞玄，也稱為“相對長度”骤铃。
2.em
參考物是父元素的font-size，具有繼承的特點坷剧。 如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px）惰爬， 整個頁面內1em不是一個固定的值。
字體大小同樣都是1.5em惫企，但是效果卻截然不同撕瞧，按照W3C提供的公式， 我們可以計算下： class為id1的div字體大小繼承自父元素body：16px*1.5em = 24px class為id2的div字體大小繼承自父元素id1：24px*1.5em = 36px class為id3的div字體大小繼承自父元素id2：36px*1.5em = 54px
3.rem
rem：W3C官網是這樣描述的“fontsize of the root element”， root element就是指的根元素html 前面說到的em是相對于其父元素來設置字體大小的风范， 這樣就會存在一個問題咨跌，進行任何元素設置沪么，都必須知道父元素的字體大小硼婿， 在多次使用中往往會給我們帶來無法預知的錯誤風險。而rem是相對于根元素html不會像em那樣禽车， 依賴于父元素的字體大小寇漫，而造成混亂。
4.%
% 百分比殉摔，相對長度單位州胳，相對于父元素的百分比值
5.vh和vw
vh和vw相對于視口的高度和寬度，而不是父元素的（CSS百分比是相對于包含它的最近的父元素的高度和寬度） 1vh 等于1/100的視口高度逸月，1vw 等于1/100的視口寬度 比如：瀏覽器高度900px栓撞，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px碗硬。 很容易實現與同屏幕等高的框： 設置一個和屏幕同寬的標題瓤湘，那標題的字體大小就會自動根據瀏覽器的寬度進行縮放， 以達到字體和viewport大小同步的效果恩尾。
3.常見問題
問題一：
為什么一開始在css樣式中給body設置font-size：62.5%弛说？
問題二：
在谷歌瀏覽器運行以下代碼，1em是顯示多大的字體翰意？
4.解決方案
答案一：
Font-size=62.5%這就使em值變?yōu)?6px*62.5%=10px木人。這樣1em=10px，1.2em=12px利于我們進行換算冀偶。
答案二：
谷歌瀏覽器強制最小字體為12號醒第，即使設置成 10px 最終都會顯示成 12px，當把html的font-size設置成10px,子節(jié)點rem的計算還是以12px為基準进鸠。
5.編碼實戰(zhàn)
6.擴展思考
css還有哪些長度單位稠曼？
7.參考文獻
px、em堤如、rem蒲列、%、vw搀罢、vh蝗岖、vm等単位有什么區(qū)別
問題：
1.手機px跟電腦px一樣不？
答案：請點擊
2.vh在手機上有哪些缺點
答案：請點擊
3.vh vw的兼容性問題
答案：請點擊
