一、存在即合理：
隨着Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。網頁設計單位是涉及到我們佈局的效果，使用不同的單位會對最終的demo，會有影響。而且現在都是要求響應式設計，需要適配各種設備，電腦，手機，平板。如果單位不合適，可能在這個設備顯示良好，那個設備就會打亂佈局。所以需要我們選擇合適的單位來進行開發，設計。
二、詳解：
1、px
1）px就是pixel的縮寫，意爲像素。
2）px就是設備或者圖片最小的一個點，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。
3）px是我們網頁設計常用的單位，也是基本單位。
4）通過px可以設置固定的佈局或者元素大小。
5）缺點：沒有彈性。
2、rpx
1）rpx 是微信小程序解決自適應屏幕尺寸的尺寸單位。
2）rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。
3）微信小程序規定屏幕的寬度爲750rpx。
4）解釋：例如寬度，相當於把屏幕寬度分爲750份，1份就是1rpx。高度類似~
3、em
1）參考物是父元素的font-size，具有繼承的特點。
2）如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
3）特點是1. em的值並不是固定的； 2. em會繼承父級元素的字體大小。
4）1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此類推……
4、rem
1）rem是相對於根元素html，這樣就意味着，我們只需要在根元素確定一個參考值，可以設計HTML爲大小爲10px，到時設置1.2rem就是12px.以此類推。
2）優點是，只需要設置根目錄的大小就可以把整個頁面的成比例的調好。
5、%
一般來說就是相對於父元素的：
1）對於普通定位元素就是我們理解的父元素
2）對於position: absolute;的元素是相對於已定位的父元素
3）對於position: fixed;的元素是相對於ViewPort（可視窗口），
6、vw
1）css3新單位，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那100vw就是1200px,10vm就是120px，以此類推……
2）舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
7、vh
和vw相似
1）css3新單位，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那100vh就是1200px，10vh就是120px，以此類推……
2）舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。
8、vm
1）css3新單位，相對於視口的寬度或高度中較小的那個。其中最小的那個被均分爲100單位的vm 舉個例子：瀏覽器高度2）2）900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。
2）兼容性太差 ,不建議使用
三、一些坑
比如說，我根據rem乘以根元素font-size算出的px值有小數，最終是零點幾px咋辦，不同瀏覽器對這個支持程度不同，有的只渲染出零點幾px對應的物理像素，有的乾脆都顯示1px，後果就是，同樣的rem值，在不同dpr的設備上寬度不同，最常見的就是邊框，有的設備上顯得特寬，特別扭，也就是經典的1px邊框問題。這個問題的解決方案也有很多，可以通過設置1px，然後根據不同dpr，設置不同的縮放來做，當然也有其他的方案。我這裏只是想說rem帶來的一些問題。
四、像素比和寬度比
像素比：dpr是設備像素比，也就是css的設備無關像素px和物理像素的比
寬度比：開發適配的設備的寬度（現在一般是iphone6），和實際的設備的寬度的比
總的來說，可以一句話來總結，像素比實現高清，寬度比實現適配
巴拉巴拉：
==主頁傳送門==