一、rem是什么
rem（font size of the root element）是指相對(duì)于根元素html的字體大小的單位。
如果html的font-size是16px
那么1rem = 16px
二、應(yīng)用場景
多應(yīng)用于移動(dòng)端網(wǎng)頁的適配（不同機(jī)型不同設(shè)備寬度）
三、如何進(jìn)行rem適配
3.1、添加meta應(yīng)對(duì)移動(dòng)端適配
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 添加meta標(biāo)簽進(jìn)行移動(dòng)端適配（讓html的寬度正好等于設(shè)備的寬度） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>移動(dòng)端適配</title>
</head>
3.2、動(dòng)態(tài)獲取當(dāng)前設(shè)備寬度
<body>
<script>
// 定義一個(gè)函數(shù)獲取當(dāng)前設(shè)備的寬度
function getWinSize() {
let width = document.documentElement.clientWidth;
console.log(width);
}
//進(jìn)入頁面默認(rèn)獲取一次
getWinSize();
//當(dāng)頁面窗口視圖改變的時(shí)候再次執(zhí)行，獲取設(shè)備寬度
window.onresize = getWinSize;
</script>
</body>
3.3、根據(jù)獲取到的設(shè)備寬度，設(shè)置html的font-size為多少合適？
假設(shè)設(shè)計(jì)稿寬度是
750px，我們獲取到的設(shè)備寬度為width
那么有等式1：
750px = width
那么有等式2：
1px = width/750
假設(shè)我們想實(shí)現(xiàn)
1rem = 100px，根據(jù)等式二，得出
1rem = 100px = 100*(width/750)
最后給
html的根元素設(shè)置字體大小值就為100*(width/750)
注意
- 這里的
1rem = 100px，好處是：- 只需要根據(jù)設(shè)計(jì)稿給的
px直接縮小100倍，改單位為rem即可
<script>
// 定義一個(gè)函數(shù)獲取當(dāng)前設(shè)備的寬度
function getWinSize() {
let width = document.documentElement.clientWidth;
// 假設(shè)設(shè)計(jì)稿寬度為750px
// 假設(shè)已知根元素我們設(shè)置為100px（這里設(shè)置100方便后續(xù)我們好計(jì)算）
// 動(dòng)態(tài)設(shè)置根元素html的fontSize
document.documentElement.style.fontSize =
100 * (width / 750) + "px";
}
//進(jìn)入頁面默認(rèn)獲取一次
getWinSize();
//當(dāng)頁面窗口視圖改變的時(shí)候再次執(zhí)行
window.onresize = getWinSize;
</script>
3.4、如何使用（px到rem的轉(zhuǎn)換）
如果設(shè)計(jì)稿給我們一個(gè)盒子寬是 350px 高是 400px
那么我們只要在數(shù)值的基礎(chǔ)上縮小 100倍即可
寬是 3.5rem高是 4rem
四、優(yōu)化
當(dāng)我們做的移動(dòng)端適配以后，這個(gè)網(wǎng)頁仍然有可能在PC端打開，這時(shí)候我們就需要對(duì)body元素設(shè)置最大寬度和居中，來適配pc端
* {
padding: 0;
margin: 0;
}
body {
/* 750根據(jù)設(shè)計(jì)稿寬度設(shè)計(jì) */
max-width: 750px;
/* 居中 */
margin: 0 auto;
}
四、進(jìn)階
4.1、封裝一個(gè)phone.js文件，專門用于移動(dòng)端適配
代碼如下
(function (doc, win) {
var docEL = document.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
// 獲取當(dāng)前設(shè)備的寬度
var clientWidth = docEL.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
//寬度大于750，根元素字體大小不能超過100px（不能大于設(shè)計(jì)稿的最大寬度）
docEL.style.fontSize = "100px"; //設(shè)置根元素大小
} else {
docEL.style.fontSize = (clientWidth / 750) * 100 + "px";
}
};
if (!doc.addEventListener) return;
//添加窗口變動(dòng)監(jiān)聽
win.addEventListener(resizeEvt, recalc, false);
//dom加載的時(shí)候執(zhí)行一次
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
4.2、引入
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 添加meta標(biāo)簽進(jìn)行移動(dòng)端適配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./phone.js"></script>
