為什么移動端要適配: 由於移動設備的尺寸不一，所以移動端的頁面要能夠適應不同尺寸的設備，即頁面的自適應，讓頁面在視覺上保持一致。
rem:rem 是css3的一種相對單位，參考是根元素HMTL的font-size的值，即html的font-size:10px;那么 1rem = 10px;
先看下面的rem書寫示例
<!DOCTYPE html>
<html lang="en" style='font-size: 10px;'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 10rem;
height: 10rem;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
元素box的大小是多少px呢？根據公式算，1rem = html 的 font-size 的值，那么 10rem = 10 * (html font-size的值) = 10 * 10 = 100px；所以box大小是100px * 100px；
知道了rem 怎么用了，那到底移動端是怎么適配的呢？我們知道用了rem作為單位,元素的大小就會根據根元素font-size的值進行計算，如果我們監聽窗口的大小去動態的設置根元素的font-size,不就能適應不同尺寸的設備了嘛，來看看下面的一段js
(function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 設置 根元素html的font-size
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);// 監聽窗口改變
doc.addEventListener('DOMContentLoaded', recalc, false) // 初始HTML加載和解析完成時
})(document, window);
這段代碼什么意思呢？就是頁面初始化的時候和窗口改變的時候，根據當時窗口的大小動態設置根元素html的font-size值，再配合使用相對單位rem,來達到自適應的效果。
最為核心的是這句代碼
docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 設置 根元素html的font-size
// docEl => 是 元素html
// clientWidth => 是當前窗口的寬度
// 750 => 是 設計稿的寬度
假如我們的開發環境的窗口和設計稿一樣也是750，那個當前根元素的font-size值就是10px;此時，我們量得一個元素的寬設計稿是750px，那么我們就要寫成 75rem;這樣通過換算 （75rem * 10px） 就會得到正確的 750px；簡單點就是 我們量的設計稿元素的寬 除以 根元素的font-size值，就是我們要寫成的rem的值，仔細想想是不是這樣的
基於我們上面的假設，如果此時窗口變成了375px,根元素font-size 就變成了 5px,我們響應設置的 75rem 實際上會渲染成 75rem* 5px = 375px;頁面也會保持同時縮放，印證了我們動態設置的沒有問題，保證了頁面的一致性