一、rem是什么
rem（font size of the root element）是指相对于根元素html的字体大小的单位。
如果html的font-size是16px
那么1rem = 16px
二、应用场景
多应用于移动端网页的适配（不同机型不同设备宽度）
三、如何进行rem适配
3.1、添加meta应对移动端适配
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 添加meta标签进行移动端适配（让html的宽度正好等于设备的宽度） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>移动端适配</title>
</head>
3.2、动态获取当前设备宽度
<body>
<script>
// 定义一个函数获取当前设备的宽度
function getWinSize() {
let width = document.documentElement.clientWidth;
console.log(width);
}
//进入页面默认获取一次
getWinSize();
//当页面窗口视图改变的时候再次执行，获取设备宽度
window.onresize = getWinSize;
</script>
</body>
3.3、根据获取到的设备宽度，设置html的font-size为多少合适？
假设设计稿宽度是
750px，我们获取到的设备宽度为width
那么有等式1：
750px = width
那么有等式2：
1px = width/750
假设我们想实现
1rem = 100px，根据等式二，得出
1rem = 100px = 100*(width/750)
最后给
html的根元素设置字体大小值就为100*(width/750)
注意
- 这里的
1rem = 100px，好处是：- 只需要根据设计稿给的
px直接缩小100倍，改单位为rem即可
<script>
// 定义一个函数获取当前设备的宽度
function getWinSize() {
let width = document.documentElement.clientWidth;
// 假设设计稿宽度为750px
// 假设已知根元素我们设置为100px（这里设置100方便后续我们好计算）
// 动态设置根元素html的fontSize
document.documentElement.style.fontSize =
100 * (width / 750) + "px";
}
//进入页面默认获取一次
getWinSize();
//当页面窗口视图改变的时候再次执行
window.onresize = getWinSize;
</script>
3.4、如何使用（px到rem的转换）
如果设计稿给我们一个盒子宽是 350px 高是 400px
那么我们只要在数值的基础上缩小 100倍即可
宽是 3.5rem高是 4rem
四、优化
当我们做的移动端适配以后，这个网页仍然有可能在PC端打开，这时候我们就需要对body元素设置最大宽度和居中，来适配pc端
* {
padding: 0;
margin: 0;
}
body {
/* 750根据设计稿宽度设计 */
max-width: 750px;
/* 居中 */
margin: 0 auto;
}
四、进阶
4.1、封装一个phone.js文件，专门用于移动端适配
代码如下
(function (doc, win) {
var docEL = document.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
// 获取当前设备的宽度
var clientWidth = docEL.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
//宽度大于750，根元素字体大小不能超过100px（不能大于设计稿的最大宽度）
docEL.style.fontSize = "100px"; //设置根元素大小
} else {
docEL.style.fontSize = (clientWidth / 750) * 100 + "px";
}
};
if (!doc.addEventListener) return;
//添加窗口变动监听
win.addEventListener(resizeEvt, recalc, false);
//dom加载的时候执行一次
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
4.2、引入
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 添加meta标签进行移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./phone.js"></script>
