<!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>