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）兼容性太差 ,不建議使用

總結

以上是生活随笔為你收集整理的了解px、rpx、em、rem、%、vw、vh、vm的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。