CSS3是最新的CSS規(guī)范版本，它在樣式表語言方面進(jìn)行了大量的擴(kuò)展和改進(jìn)，其中最顯著的改進(jìn)之一就是新增了一些新的單位，下面我們來逐一了解吧。

p {
font-size: 30px;
}

1. rem

rem是root em（根em）的縮寫，它是基于html根元素字體大小計(jì)算的單位。它解決了em多層嵌套時(shí)字體大小疊加的問題，它的計(jì)算公式為：

p {
font-size: 2rem; /*如果html根元素字體大小為16px，則2rem=32px*/
}

2. vw和vh

vw和vh是viewport width和viewport height的縮寫，它們是基于視口寬度和高度計(jì)算的單位。它們的計(jì)算公式為：

p {
font-size: 5vw; /*視口寬度為1000px時(shí)，5vw=50px*/
}
p {
font-size: 10vh; /*視口高度為800px時(shí)，10vh=80px*/
}

3. vmin和vmax

vmin和vmax是基于視口寬度和高度中較小值和較大值來計(jì)算的單位，它們的計(jì)算公式為：

p {
font-size: 3vmin; /*視口寬度為1000px、視口高度為800px時(shí)，3vmin=24px*/
}
p {
font-size: 2vmax; /*視口寬度為1000px、視口高度為800px時(shí)，2vmax=16px*/
}

4. ex和ch

ex和ch都是相對于字體尺寸的單位，它們的計(jì)算公式為：

p {
font-size: 20px;
line-height: 3ex; /*3ex=60px*/
}
p {
font-size: 16px;
width: 20ch; /*20ch表示能夠容納20個(gè)“0”的寬度*/
}

以上就是CSS3新增的一些單位，它們通過不同的計(jì)算方式，可以實(shí)現(xiàn)更加靈活、自適應(yīng)的布局效果。