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