因為手機屏幕的分辨率大小不一 ，如果使用傳統的靜態布局，把每個元素的寬高樣式寫死，在不同的屏幕中就有各種各樣的顯示效果。這顯然不是我們想要的結果。我們需要的是根據屏幕分辨率的不同，來適配不同的樣式大小。使不同的手機分辨率下都有相同的樣式布局
1.rem適配
1rem就是html標簽font-size的大小，在rem適配方案中，我們以rem作為基值來設定元素的大小。1rem單位越大，元素的大小也就越大，1rem單位越小，元素的大小也就越小(1em是當前元素的文字大小)
實現方法：通過js獲取屏幕的分辨率來動態設置1rem的大小，即屏幕分辨率越大 => 1rem越大 => 元素也越大，這樣來適配不同分辨率的屏幕
缺點：需要手動轉換rem和px
注意：需要設置完美視口。另外1rem的值雖然可以自定義，但是谷歌瀏覽器有最小字體為12px，所以設置rem的時候要保證最小屏幕下的1rem不能小於12px
<!-- 設置完美視口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
方法一：設置html元素的內聯樣式
<script>
var html = document.querySelector('html')
// 照這種設置 375分辨率 （蘋果6）的1rem = 20px
html.style.fontSize = document.documentElement.clientWidth/18.75 + 'px'
</script>
方法二：添加style標簽，為html標簽設定樣式，這種方法可以將樣式權重提升為最高
<script>
var head = document.querySelector('head')
// 在iphone6中 1rem=20px 移動端瀏覽器字體最小12px
var w = document.documentElement.clientWidth/18.75
// 創建style標簽
var styleNode = document.createElement('style')
// 在style標簽中寫入內容
styleNode.innerHTML = "html{font-size:"+ w +"px !important}"
// 將style節點插入到head中
head.appendChild(styleNode)
</script>
2.viewport適配
viewport適配就是使用縮放，將固定大小的頁面縮放成與屏幕分辨率一樣的大小
優點：只需按設計圖1:1的大小來設定元素的大小即可，無需考慮數值轉換（數值轉換交給scale去做）
在meta標簽中，scale=1.0就相當於設定width=設備獨立像素的大小
以設計圖為640px為例，假設我們的手機屏幕寬度是375px，在scale=1時就會出現這種效果：
這種方案下我們需要破壞完美視口，修改scale的值來適配不同屏幕。只要將頁面縮小到手機屏幕的尺寸，這樣就不會再出現滾動條（375/640=0.5859375）
<meta name="viewport" content="initial-scale=0.5859375" />
實際開發中，手機的屏幕大小有很多種，並不是固定的。頁面也是一樣，並不是固定的640，所以需要 用js來動態設置scale的值
<script>
// 設置設計圖的尺寸640 / 750 都行
var targetW = 640
// 設定縮放比例
var scale = window.screen.width / targetW
// 創建meta標簽
var meta = document.createElement('meta')
// 為meta標簽設定屬性值
meta.name = "viewport"
meta.content = "initial-scale="+scale+", minimum-scale="+scale+", maximum-scale="+scale+",user-scalable=no"
// 將meta標簽插入到head標簽中
document.head.appendChild(meta)
</script>
3.vw和vh
vw和vh是相對於視口的寬度/高度，即：
100vw = 視口的寬度
100vh = 視口的高度
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
#box{
width: 50vw;
height: 50vh;
background-color: red;
}
</style>
<body>
<div id="box"></div>
</body>
效果：
