<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
width: 10rem;
height: 10rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<script>
// 通过js，动态获取clientWidth,根据这个值计算出合适的html的font-size值，配合css中用rem做单位，完成移动端适配。css中rem的数值，可以使用插件来计算。
//插件比如postcss-petorem 只适用于vue? 待验证。不行就只有自己计算
; (function (doc, win, undefined) {
var docEl = doc.documentElement, //获取document的根元素，即html
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',//获取移动端屏幕是否翻转（手机重力感应等引起屏幕长宽变化之类的）
// 判断在window对象中是否有orientationchange属性，因为orientationchange会遇到兼容性问题，有的浏览器不支持，所以这边做了判断来决定是用orientationchange还是resize（思路就是用resizeEvt这个变量来控制用哪个，后面只要用resizeEvt这个变量来监听屏幕是否被调整）
recalc = function () {
var clientWidth = docEl.clientWidth; //获取html可视区的宽度
if (clientWidth === undefined) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; //根据屏幕宽度，来动态计算html的font-size的大小 这个值可以自己来定
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false); //false传入undefined的位置
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);
</script>
//代码整体思路解析：
// 自动传入document,window,获取document的根元素，设置resizeEvt的值，判断window对象中是否有orientationchange属性，有就赋值给resizeEvt，没有就使用resize赋值给resizeEvt，
//用clientWidth获取html可视区的宽度（即屏幕宽度），如果clientWidth未定义，就return ，否則就设置html的 font-size为20 * (clientWidth / 320) + 'px';
//给window绑定事件，若果resizeEvt事件触发（即屏幕发生翻转），就执行recalc(即重新计算屏幕宽度)
//给document绑定事件，document加载完成，就执行recalc(即重新计算屏幕宽度)
</body>
</html>
