1.定义
rem（font size of the root element）是指相对于根元素的字体大小的单位。 1rem 等于根元素 htm 的 font-size，即只需要设置根元素的 font-size，其它元素使用 rem 单位时，设置成相应的百分比即可。
2.实现原理（1rem等于html的font-sze大小）
只要 html 的 font-size 的大小变了，rem对应的px大小 就会自动变，所以 rem 是通过动态设置 html 的 font-size 来改变 width 的大小，以达到网页自适应大小的目的；
# 方案一是通过给html元素直接设置100vw来动态获取当前屏幕尺寸
<!DOCTYPE html>
<html lang="en">
<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>
/* 以设计稿为375px作为视觉稿宽度 */
html{
font-size: 26.666667vw;
/*div中font-size为1rem，同时html的font-size设置为100vw 1rem为375px*/
/* 100vw - 1rem - 375px */
/* a vw - 1rem - 100px */
/* a= 26.666667vw 时，1rem = 100px*/
}
div{
font-size:0.16rem;/* 等同于16px */
}
</style>
</head>
<body>
<div>只想搞钱</div>
</body>
</html>
# 方案二是通过js动态设置html的font-size
<!DOCTYPE html>
<html lang="en">
<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>
/* 以设计稿为375px作为视觉稿宽度 */
div {
width: 300px;
height: 300px;
border: 1px solid pink;
font-size: 0.16rem;
}
</style>
</head>
<body>
<div>是sdfasf </div>
</body>
<script>
(function (w, d) {
function setSize() {
var screenWidth = d.documentElement.clientWidth;
var currentFontSize = screenWidth * 100 / 375;
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
</html>
