移动端rem布局简易版

最新推荐文章于 2024-07-28 20:27:10 发布

彦青i

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量85

点赞数

分类专栏： JavaScript 文章标签： javascript css html5

本文链接：https://blog.csdn.net/qq_41200374/article/details/125678709

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!--
 * @Author: 
 * @Date: 2021-12-10 14:45:45
 * @LastEditTime: 2021-12-10 15:33:53
 * @FilePath: \123\1.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
</head>
<style>
  li {
    font-size: 1rem;
  }
</style>

<body>

  <div class="container">
    <div class="item">
      <ul>
        <li>姓名</li>
        <li>张三</li>
        <li>性别</li>
        <li>男</li>
      </ul>
    </div>
  </div>

  <script>
    remInit(24, 720)
    //基准值 ，baseWidth设计图纸宽度
    function remInit(baseSize, baseWidth) {
      function baseFontSize(baseSize, baseWidth) {
      //这里计算缩放比
        const scale = document.documentElement.clientWidth / baseWidth
        console.log(scale);
        console.log(Math.min(scale, 1));
        // Math.min(scale, 1) 选取最小的值作为比例 
        //大于1时说明当前屏幕宽度大于设计图纸宽度适用baseSize基准值 
        //小于1时说明当前屏幕小于设计图纸宽度通过计算得出基准值
        document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px';
        console.log(baseSize * Math.min(scale, 1) + 'px');
      }

      window.onload = () => {
        baseFontSize(baseSize, baseWidth)
      }
      //每次窗口发生变化执行一次
      window.onresize = () => {
        baseFontSize(baseSize, baseWidth)
      }
    }
    
  </script>
</body>

</html>