image.png
视口发生改变根标签文字大小也要跟着改变

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       div {
  10.         width: 2rem;
  11.         height: 5rem;
  12.         background-color: bisque;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <div></div>
  18.     <script>
  19.       function fn() {
  20.       //获取当前设备的宽度
  21.         let cwidth = document.documentElement.offsetWidth;
  22.         //定义变量保存分数
  23.         let num = 20;
  24.         //计算根标签文字大小
  25.         let font_size = cwidth / num;
  26.         //给html标签设置文字大小
  27.         document.documentElement.style.fontSize = font_size + "px";
  28.       }
  29.       fn();
  30.       //给window注册resize事件（resize事件只要设备屏幕大小发生变化，就会触发这个事件）
  31.       window.onresize = function () {
  32.         fn();
  33.       };
  34.     </script>
  35.   </body>
  36. </html>

封装一个rem适配的js文件，在需要的html中直接导入使用即可

image.png

  1. //适配以及其他功能的JS
  2. //关键设置html字体大小
  3. //获取屏幕的大小
  4. //把代码写到自调用函数中，避免变量污染
  5. (function () {
  6.   let setFont = function () {
  8.     let html = document.documentElement//获取html大小
  9.     //获取也的宽度
  10.     let width = html.clientWidth//offsetWidth包含边框（区别）
  11.     // 适配一个范围1024-1920
  12.     if (width < 1024) width = 1024
  13.     if (width > 1920) width = 1920
  14.     // 计算字体大小
  15.     let fontSize = width / 80 + 'px'
  16.     html.style.fontSize = fontSize
  17.     //给html设置跟标签文字大小
  18.   }
  19.   //当屏幕打开的时候先调用一次
  20.   setFont()
  21.   //当设备的尺寸发生改变的时候，动态设置根标签的大小
  22.   window.addEventListener('resize', function () {
  23.     setFont()
  24.   })
  25. })()