1.px

px就是像素，也是我們現(xiàn)在經(jīng)常使用的基本單位，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個(gè)像素點(diǎn)，垂直方向是768個(gè)像素點(diǎn)。

2.em

em參考物是父元素的font-size，默認(rèn)字體大小是16px，所以1em不是固定值，因?yàn)樗鼤?huì)繼承父元素的字體大小

3.rem

rem參考物是相對(duì)于根元素，我們?cè)谑褂脮r(shí)可以在根元素設(shè)置一個(gè)參考值即可，相對(duì)于em使用，減少很大運(yùn)算工作量，例：html大小為10px，12rem就是120px

4.%

% 是相對(duì)于父元素的大小設(shè)定的比率，position:absolute;的元素是相對(duì)于已經(jīng)定位的父元素，position：fixed；的元素是相對(duì)可視窗口

5.vm

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

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

6.vh

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

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

7.vw

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

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

?

https://juejin.cn/post/6844903849153527815

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。