rem适配手机

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yinhao-jack/p/10748764.html

文章标签：

#javascript #ViewUI

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 6     <title>Title</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12 
13         #box{
14             width:0.5rem;
15             height:0.5rem;
16             background: red;
17         }
18     </style>
19 </head>
20 <body>
21 <div id="box"></div>
22 </body>
23 
24 <script type="text/javascript">
25      window.onload =function(){
26          var width =document.documentElement.clientWidth;
27          console.log("width:",width)
28          var htmlNode =document.querySelector('html');
29          console.log("htmlNode:",htmlNode)
30          htmlNode.style.fontSize=width + 'px'
31          console.log("htmlNode2:",htmlNode.style.fontiSize)
32      }
33 </script>
34 </html>