<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
设置【视口标准】说明
width=device-width; 设置html页面的尺寸和真实设备的尺寸相同
initial-scale=1.0; 设置html页面的默认打开放大倍率是100%(不放大)
minimum-scale=1.0; 设置html页面的默认允许两根手指缩小的倍率是100%(不允许缩小)
maximum-scale=1.0; 设置html页面的默认允许两根手指放大的倍率是100%(不允许缩小)
user-scalable=no; 设置html页面是否允许用于用两根手指捏合缩放页面(不允许)
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<title>Document</title>
<script>
// 页面加载完毕后,自动执行动态适配
window.onload = function (){ activeRem(); };
// 页面尺寸发生变化的时候,自动执行动态适配
window.onresize = function (){ activeRem(); };
// 动态适配方案
function activeRem(){
// 获取页面的宽度
var cwidth = document.documentElement.clientWidth;
// 计算根字体大小
var hsize = (cwidth / 750) * 100;
// 重置页面的根字体大小,确保根字体在页面发生变化的时候,动态发生改变
document.documentElement.style.fontSize = hsize+'px';
}
</script>
</head>
<body>
<style>
*{ margin: 0; padding: 0; list-style: none; }
div{
width: 3rem;
height: 2rem;
border: 1px solid black;
}
</style>
<div></div>
</body>
</html>