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;