1.em
在做手機端的時候經常會用到的做字體的尺寸單位
說白了 em就相當於“倍”，比如設置當前的div的字體大小爲1.5em，則當前的div的字體大小爲：當前div繼承的字體大小*1.5
但是當div進行嵌套的時候，em始終是按照當前div繼承的字體大小來縮放，參照後面的例子。
2.rem
這裏的r就是root的意思，意思是相對於根節點來進行縮放，當有嵌套關係的時候，嵌套關係的元素的字體大小始終按照根節點的字體大小進行縮放。
參照後面給的demo
3.vh
vh就是當前屏幕可見高度的1%，也就是說
height:100vh == height:100%;
但是有個好處是當元素沒有內容時候，設置height:100%該元素不會被撐開，
但是設置height:100vh，該元素會被撐開屏幕高度一致。
4.vw
vw就是當前屏幕寬度的1%
補充一句，當設置width:100%，被設置元素的寬度是按照父元素的寬度來設置，
但是100vw是相對於屏幕可見寬度來設置的，所以會出現50vw 比50%大的情況
-
<!DOCTYPE html>
-
<html lang="Zh-cn">
-
<head>
-
<meta charset="UTF-8">
-
<title>恭賀新春</title>
-
</head>
-
<style type="text/css" media="screen">
-
html{
-
font-size: 14px;
-
}
-
.em,
-
.em > .em-son,
-
.em > .em-son > .em-grandson {
-
font-size: 1.2em;
-
}
-
.rem,
-
.rem > .rem-son,
-
.rem > .rem-son > .rem-grandson {
-
font-size: 1.2rem;
-
}
-
.rem-box {
-
background: #d60b3b;
-
width:10rem;
-
height: 10rem;
-
color: #fff;
-
text-align: center;
-
line-height:5rem;
-
}
-
.vhvw-box {
-
background: #d60b3b;
-
width:50vw;
-
height: 50vh;
-
color: #fff;
-
text-align: center;
-
line-height:25vh;
-
}
-
</style>
-
<body>
-
<h1>em 繼承父元素的字體大小，來變大或變小，多層嵌套字體變化</h1>
-
<div class="em">
-
字體大小 1.2 * 14（父元素body） = 16px
-
<div class="em-son">
-
字體大小 1.2 * 16(父元素em) = 20px
-
<div class="em-grandson">
-
字體大小 1.2 * 20(父元素em-son) = 24px
-
</div>
-
</div>
-
</div>
-
<br>
-
<h1>rem 繼承根節點元素的字體大小，來變大或變小，多層嵌套字體不變化</h1>
-
<div class="rem">
-
字體大小 1.2 * 14（根節點html） = 16px
-
<div class="rem-son">
-
字體大小 1.2 * 14（根節點html） = 16px
-
<div class="rem-grandson">
-
字體大小 1.2 * 14（根節點html） = 16px
-
</div>
-
</div>
-
</div>
-
<br>
-
<h1>rem 也可作爲固定長度單位設置寬高等</h1>
-
<div class="rem-box">
-
寬：14 * 10 = 140px<br>
-
高：14 * 10 = 140px
-
</div>
-
<br>
-
<h1>vh,vw 屏幕可見區域的高度，寬度的1%</h1>
-
<div class="vhvw-box">
-
寬：屏幕寬度的50%<br>
-
高：屏幕高度的50%
-
</div>
-
</body>
-
</html>
-
<!DOCTYPE html>
-
<html lang="Zh-cn">
-
<head>
-
<meta charset="UTF-8">
-
<title>恭賀新春</title>
-
</head>
-
<style type="text/css" media="screen">
-
html{
-
font-size: 14px;
-
}
-
.em,
-
.em > .em-son,
-
.em > .em-son > .em-grandson {
-
font-size: 1.2em;
-
}
-
.rem,
-
.rem > .rem-son,
-
.rem > .rem-son > .rem-grandson {
-
font-size: 1.2rem;
-
}
-
.rem-box {
-
background: #d60b3b;
-
width:10rem;
-
height: 10rem;
-
color: #fff;
-
text-align: center;
-
line-height:5rem;
-
}
-
.vhvw-box {
-
background: #d60b3b;
-
width:50vw;
-
height: 50vh;
-
color: #fff;
-
text-align: center;
-
line-height:25vh;
-
}
-
</style>
-
<body>
-
<h1>em 繼承父元素的字體大小，來變大或變小，多層嵌套字體變化</h1>
-
<div class="em">
-
字體大小 1.2 * 14（父元素body） = 16px
-
<div class="em-son">
-
字體大小 1.2 * 16(父元素em) = 20px
-
<div class="em-grandson">
-
字體大小 1.2 * 20(父元素em-son) = 24px
-
</div>
-
</div>
-
</div>
-
<br>
-
<h1>rem 繼承根節點元素的字體大小，來變大或變小，多層嵌套字體不變化</h1>
-
<div class="rem">
-
字體大小 1.2 * 14（根節點html） = 16px
-
<div class="rem-son">
-
字體大小 1.2 * 14（根節點html） = 16px
-
<div class="rem-grandson">
-
字體大小 1.2 * 14（根節點html） = 16px
-
</div>
-
</div>
-
</div>
-
<br>
-
<h1>rem 也可作爲固定長度單位設置寬高等</h1>
-
<div class="rem-box">
-
寬：14 * 10 = 140px<br>
-
高：14 * 10 = 140px
-
</div>
-
<br>
-
<h1>vh,vw 屏幕可見區域的高度，寬度的1%</h1>
-
<div class="vhvw-box">
-
寬：屏幕寬度的50%<br>
-
高：屏幕高度的50%
-
</div>
-
</body>
-
</html>