1潘拨、px：相對(duì)長(zhǎng)度單位吊输。像素px是相對(duì)于顯示器屏幕分辨率而言的。
2铁追、em：相對(duì)長(zhǎng)度單位季蚂。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置琅束，則相對(duì)于瀏覽器的默認(rèn)字體尺寸扭屁。
看下面例子：
HTML:
<body>body
<div class="div1">div1
<div class="div2">div2
<div class="div3">div3</div>
</div>
</div>
</body>
CSS:
div{
font-size:1.5em;
}
計(jì)算關(guān)系是這樣的：
body的font-size是繼承自跟元素html，html的尺寸是瀏覽器默認(rèn)尺寸14px涩禀；
div1的font-size=1.5*14px = 21px;
div2的font-size=1.5*21px = 31.5px;
div3的font-size=1.5*31.5px = 47.25px;
如果手動(dòng)設(shè)置div2的font-size為40px料滥，div3的font-size應(yīng)該為1.5*40px = 60px。
3艾船、rem：相對(duì)長(zhǎng)度單位幔欧。r’是“root”的縮寫，相對(duì)于根元素<html>的字體大小丽声。
例如還是上面的html代碼礁蔗，添加如下樣式：
.div3{
font-size:1.5rem;
}
此時(shí)div3的font-size = 1.514px = 1.5html的font-size**
4、vh and vw：相對(duì)于視口的高度和寬度雁社，而不是父元素的（CSS百分比是相對(duì)于包含它的最近的父元素的高度和寬度）浴井。
1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度霉撵。
比如：瀏覽器高度900px磺浙，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px徒坡。
很容易實(shí)現(xiàn)與同屏幕等高的框：.slide { height: 100vh;}
設(shè)置一個(gè)和屏幕同寬的標(biāo)題撕氧，h1{font-size:100vw}，那標(biāo)題的字體大小就會(huì)自動(dòng)根據(jù)瀏覽器的寬度進(jìn)行縮放喇完，以達(dá)到字體和viewport大小同步的效果伦泥。
5、vmin and vmax：關(guān)于視口高度和寬度兩者的最小值或者最大值锦溪。
比如不脯，瀏覽器的寬度設(shè)置為1200px，高度設(shè)置為800px刻诊， 1vmax = 1200/100px = 12px防楷， 1vmin = 800/100px = 8px。如果寬度設(shè)置為600px,高度設(shè)置為1080px, 1vmin就等于6px, 1vmax則未10.8px则涯。
有一個(gè)元素复局，你需要讓它始終在屏幕上可見：
.box {
height: 100vmin;
width: 100vmin;
}
