什么是適配
chrome 最小字體：12px，默認(rèn)字體：16px
rem 單位：參照于根元素 html 的 font-size 值
適配：就是讓網(wǎng)頁在各種不同尺寸的移動設(shè)備上，都能百分之百的按相同比例還原設(shè)計圖
rem 適配方案
<!DOCTYPE html>
<html lang="en">
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
? ? ? ? <meta http-equiv="X-UA-Compatible" content="ie=dedg">
? ? ? ? <title>移動端rem適配</title>
? ? ? ? <style>
? ? ? ? ? ? body {
? ? ? ? ? ? ? ? margin: 0;
????????????}
? ? ? ? ? ? .box {
? ? ? ? ? ? ? ? width: 16rem;
? ? ? ? ? ? ? ? height: 4rem;
? ? ? ? ? ? ? ? background: #70a6ff;
????????????}
????????</style>
? ? <head>
? ? <body>
? ? ? ? <div class="box"></div>
? ? ? ? <script>
? ??????????(function () {
????????????????const layoutWidth = document.documentElement.clientWidth,
? ? ? ? ? ? ? ? ? ? ? ? ? remSize = layoutWidth / 16,
? ? ? ? ? ? ? ? ? ? ? ? ? styleNode = document.createElement('style')
? ? ? ? ? ? ? ? ?styleNode.innerHTML = 'html {font-size: ' + remSize + 'px !important;}'
? ? ? ? ? ? ? ? ? document.head.appendChild(styleNode) }
????????????)()
????????</script>
????</body>
</html>
本質(zhì)：將頁面元素的尺寸跟布局視口的尺寸通過 rem 關(guān)聯(lián)起來，不同的設(shè)備 rem 對應(yīng)的像素值不一樣，這樣就實現(xiàn)了等比例
優(yōu)點：使用了完美視口，太大的元素也能完好的顯示在頁面，不會被縮放；圖片失真的情況不嚴(yán)重（因為一般的設(shè)計圖基于 iPhone 6 都是 750px 的寬度）
缺點：頁面上的每一個元素都要從 px 單位轉(zhuǎn)換為 rem，計算過程比較復(fù)雜（后面用 LESS 自動計算）
viewport 適配方案
同上，把（function(){}）（）替換
(function () {
? ? ? const targetLayoutWidth = 320,
? ? ? ? ? ? currentLayoutWidth = document.documentElement.clientWidth,
? ? ? ? ? ? scale = currentLayoutWidth / targetLayoutWidth,
? ? ? ? ? ? metaNode = document.querySelector('meta[name="viewport"]')
? ? ? metaNode.setAttribute('content', 'initial-scale=' + scale + ', user-scalable=no')
? ? })()
本質(zhì)：將頁面的布局視口尺寸設(shè)置（縮放）為設(shè)計圖的尺寸（一般為 320px），這樣設(shè)計圖跟布局視口一比一對應(yīng)，頁面中的元素尺寸就跟設(shè)計圖中標(biāo)注的尺寸一致，所以不用管設(shè)備的尺寸即可以實現(xiàn)等比例
優(yōu)點：設(shè)計圖所見即所得
缺點：由于布局視口縮放（一般是放大操作）后，它的像素個數(shù)會變少，這時如果在 meta 里寫上 width="device-width" 的話，由于理想視口的像素比較多，所以布局視口會取理想視口的像素值。所以這時不能寫這句話，但這樣的話就無法實現(xiàn)完美視口了，頁面中如果有太大的元素，就會被自動縮放，而不會出現(xiàn)滾動條
心情不太愉快，不寫了。事件點透之類的下次來在寫
