搞清楚CSS單位px、em、rem、vh、vw、vmin、vmax
1、px：相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。 2、em：相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。 看下面例子： HTML:
<body>body
<div class="div1">div1
<div class="div2">div2
<div class="div3">div3</div>
</div>
</div>
</body>
div{ font-size:1.5em; }
計算關係是這樣的：
body的font-size是繼承自跟元素html，html的尺寸是瀏覽器預設尺寸14px；
div1的font-size=1.514px = 21px;
div2的font-size=1.521px = 31.5px;
div3的font-size=1.531.5px = 47.25px;
如果手動設定div2的font-size為40px，div3的font-size應該為1.540px = 60px。
例如還是上面的html程式碼，新增如下樣式：
.div3{
font-size:1.5rem;
}
4、vh and vw：相對於視口的高度和寬度，而不是父元素的（CSS百分比是相對於包含它的最近的父元素的高度和寬度）。
1vh 等於1/100的視口高度，1vw 等於1/100的視口寬度。
比如：瀏覽器高度900px，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。
很容易實現與同螢幕等高的框：.slide { height: 100vh;} 設定一個和螢幕同寬的標題，h1{font-size:100vw}，那標題的字型大小就會自動根據瀏覽器的寬度進行縮放，以達到字型和viewport大小同步的效果。
5、vmin and vmax：關於視口高度和寬度兩者的最小值或者最大值。
比如，瀏覽器的寬度設定為1200px，高度設定為800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果寬度設定為600px,高度設定為1080px, 1vmin就等於6px, 1vmax則未10.8px。
有一個元素，你需要讓它始終在螢幕上可見：
.box {
height: 100vmin;
width: 100vmin;
}
