rem适配手机 

 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>

1、 var width =document.documentElement.clientWidth   获取手机的宽度像素

2、 var htmlNode =document.querySelector('html');   获取html的元素

3、htmlNode.style.fontSize=width + 'px'  将html默认的16px换成手机的像素，后面就是1rem;

 

posted @ 2019-04-22 10:35  Haoyin-杰克  阅读(200)  评论(0)  编辑  收藏  举报