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”的縮寫(xiě)，相對(duì)于根元素<html>的字體大小。
例如還是上面的html代碼，添加如下樣式：
.div3{ font-size:1.5rem;}
此時(shí)div3的font-size = 1.5*14px = 1.5*html的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è)元素，你需要讓它始終在屏幕上可見(jiàn)：
.box { height: 100vmin; width: 100vmin;}
如果你要讓這個(gè)元素始終鋪滿(mǎn)整個(gè)視口的可見(jiàn)區(qū)域：
.box { height: 100vmax; width: 100vmax;}
參考：http://j.news.163.com/docs/99/2014111814/ABBB78BG00964KGG.html
聯(lián)系客服
