<!DOCTYPE html>
<!--lang="en" : 英语 ；声明当前页面的语言类型。-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 1rem;
height: 1rem;
background: deeppink;
}
/*
html根元素字体大小设置屏幕区域的宽
这个必须配合 上面的 lang="en" .
*/
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
//获取屏幕宽度
var width = document.documentElement.clientWidth;
//获取html
var htmlNode = document.querySelector('html');
//设置html字体大小
htmlNode.style.fontSize = width + 'px';
</script>
</html>