什么是適配
chrome 最小字體：12px洛心，默認(rèn)字體：16px
rem 單位：參照于根元素 html 的 font-size 值
適配：就是讓網(wǎng)頁在各種不同尺寸的移動(dòng)設(shè)備上扔水，都能百分之百的按相同比例還原設(shè)計(jì)圖
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>移動(dòng)端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)的像素值不一樣鸵隧，這樣就實(shí)現(xiàn)了等比例
優(yōu)點(diǎn)：使用了完美視口幽告，太大的元素也能完好的顯示在頁面神凑，不會(huì)被縮放象浑；圖片失真的情況不嚴(yán)重（因?yàn)橐话愕脑O(shè)計(jì)圖基于 iPhone 6 都是 750px 的寬度）
缺點(diǎn)：頁面上的每一個(gè)元素都要從 px 單位轉(zhuǎn)換為 rem旭等，計(jì)算過程比較復(fù)雜（后面用 LESS 自動(dòng)計(jì)算）
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è)計(jì)圖的尺寸（一般為 320px）疗锐，這樣設(shè)計(jì)圖跟布局視口一比一對應(yīng)，頁面中的元素尺寸就跟設(shè)計(jì)圖中標(biāo)注的尺寸一致费彼，所以不用管設(shè)備的尺寸即可以實(shí)現(xiàn)等比例
優(yōu)點(diǎn)：設(shè)計(jì)圖所見即所得
缺點(diǎn)：由于布局視口縮放（一般是放大操作）后滑臊，它的像素個(gè)數(shù)會(huì)變少，這時(shí)如果在 meta 里寫上 width="device-width" 的話箍铲，由于理想視口的像素比較多雇卷，所以布局視口會(huì)取理想視口的像素值。所以這時(shí)不能寫這句話，但這樣的話就無法實(shí)現(xiàn)完美視口了关划，頁面中如果有太大的元素小染，就會(huì)被自動(dòng)縮放，而不會(huì)出現(xiàn)滾動(dòng)條
心情不太愉快祭玉，不寫了氧映。事件點(diǎn)透之類的下次來在寫
