<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } #div1{ /*7.5rem===100%*/ width: 5rem; height: 1rem; background: skyblue; font-size: .7rem; text-align: center; } </style> </head> <body> <div id="div1"> helloworld </div> <script> function xiangying(){ var html = document.querySelector('html') html.style.fontSize = window.innerWidth/7.5 + 'px' // window.onresize = function(e){ // console.log(e) // console.log(window) // html.style.fontSize = window.innerWidth/7.5 + 'px' // } } xiangying() </script> </body> </html>