1.px

px就是像素，也是我們現在經常使用的基本單位，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。

2.em

em參考物是父元素的font-size，默認字體大小是16px，所以1em不是固定值，因為它會繼承父元素的字體大小

3.rem

rem參考物是相對于根元素，我們在使用時可以在根元素設置一個參考值即可，相對于em使用，減少很大運算工作量，例：html大小為10px，12rem就是120px

4.%

% 是相對于父元素的大小設定的比率，position:absolute;的元素是相對于已經定位的父元素，position：fixed；的元素是相對可視窗口

5.vm

vm相對于視口的寬度。視口被均分為100單位

h1 {font-size: 8vw; }再舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px

6.vh

vm相對于視口的寬度。視口被均分為100單位

h1 {font-size: 8vh; }css3新單位，viewpoint height的縮寫，視窗高度，1vh等于視窗高度的1%。 舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。

7.vw

css3新單位，viewpoint width的縮寫，視窗寬度，1vw等于視窗寬度的1%。

舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。

?

https://juejin.cn/post/6844903849153527815

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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