<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>移动端适配方案REM</title>
<style>
#remDiv{
width: 8rem;
height: 8rem;
background-color: pink
}
</style>
</head>
<body>
<div style="font-size: .75rem">
解决网页在不同屏幕上展现出的不同布局，导致页面错乱，利用获取视觉窗口的大小设置根元素的字体大小进行适配
</div>
<div id="remDiv"></div>
<script>
;(function () {
//动态获取当前的页面的宽度
var clientWidth = document.documentElement.clientWidth;
//创建页面的style标签
var styleNode = document.createElement(‘style‘);
//向标签内添加样式，并将页面分份（rem就不会在使用小数点） 1rem = 16px 1px = 0.0625rm
styleNode.innerHTML = ‘html{font-size: ‘+clientWidth/16+‘px;}‘;
//将标签加入到文档中，从而设置页面根元素的字体大小
document.head.appendChild(styleNode);
//也可以使用一下语句设置
// document.querySelector(‘html‘).style.fontSize = clientWidth+‘px‘;
})();
</script>
</body>
</html>
移动端适配 rem