<!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>
时间： 2024-10-09 19:52:11