css中height 100vh的應用場景，動態高度百分比布局，瀏覽器視區大小單位
height:100vh
一些只能vw, vh才能完成的應用場景：
1. 場景之：元素的尺寸限制
vw vh 主要是實現了動態高度百分比布局，比如寬高比不固定的圖片，vw很輕易的實現正方形圖片縮略圖
原始大圖的尺寸限制問題——因為很有可能圖片過大，尼瑪一屏顯示器區域不夠放，我們需要對其進行縮放處理。
這類限制的實現，在當下，需要獲得圖片的原始大小，以及瀏覽器內部尺寸，算大小，算比例等，算是比較折騰的。
但是，vw, vh等單位本身就是瀏覽器視區大小相關單位，直接使用其做限制，豈不省了N多JS代碼？
CSS代碼：
.vw_vh_img {
max-width: 90vw;
max-height: 90%;
max-height: 90vh;
}
HTML代碼：
<img src="http://ww3.sinaimg.cn/large/61ecbb3djw1dx4hai2ggnj.jpg" class="vw_vh_img" />
2. CSS3新vw, vh單位與純CSS定位的彈框屏幕居中效果實例頁面
3. 視區覆蓋以及邊界定位
vh確實是相對於屏幕的，但默認body有一個margin，100%加上這個margin就超出了就會出現滾動條。清除body的margin即可。
body{margin:0;}
=====================
在做手機端的時候經常會用到的做字體的尺寸單位
說白了 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>