<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="05.css"/>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</body>
<script type="text/javascript">
//1. 获取像素比值
var num = 1/window.devicePixelRatio;
//2. 动态生成meta标签 视口标签
//<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, user-scalable=no, initial-scale='+num+', maximum-scale='+num+', minimum-scale='+num+'';
document.documentElement.appendChild(meta);
//3. 获取页面十分之1大小
var width = document.documentElement.clientWidth/10;
//4. 设置html的字号为页面的百分之1
document.documentElement.style.fontSize = width+'px';
// 现在html的字号 就是百分之一的页面大小
//而 1rem就等于一个html的字号 就等于 页面百分之1 10rem
console.log(width)
</script>
</html>