移动端的rem和动态的font-size配置

小丑鱼20210316

已于 2023-07-21 17:28:27 修改

阅读量123

点赞数

文章标签： javascript

于 2023-07-21 16:00:28 首次发布

本文链接：https://blog.csdn.net/weixin_38331749/article/details/131853995

版权

<!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, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>Document</title>
  <style>
    /* 利用css的层叠特性 */
    @media screen and (min-width: 320px) {
      html {
        font-size: 16px;
      }
    }
    @media screen and (min-width: 375px) {
      html {
        font-size: 18px;
      }
    }
    @media screen and (min-width: 414px) {
      html {
        font-size: 20px;
      }
    }
    @media screen and (min-width: 480px) {
      html {
        font-size: 22px;
      }
    }
    .box {
      width: 5rem;
      height: 5rem;
      background-color: skyblue;
    }
  </style>
</head>
 
<body>
  <div class="box"></div>
</body>
 
</html>

2、JS动态计算

根据html的宽度计算出font-size的大小，并设置到html上
监听页面宽度的实时变化，重新设置font-size到html上

计算公式：

定义公式：rem(倍数） = width / （html的font-size），根据公式我们可以得出：
rem(倍数） = 设计稿宽度( imgWidth ) / 你设置的font-size( defalutSize )
rem(倍数） = 网页的实际宽度(screenWidth) / 你需要动态设置的font-size( x )

<script type="text/javascript">
  (function(w,d) {
  function setSize() {
    var screenWidth = d.documentElement.clientWidth;
    var currentFontSize = screenWidth * 100 / 750;
    d.documentElement.style.fontSize = currentFontSize + 'px';
  }
  // 实时监听屏幕尺寸改变的函数
  w.addEventListener('resize',setSize);
  // 监听页面跳转(前进或者后退),重新设置一下
  w.addEventListener('pageShow',setSize)
  w.addEventListener('DOMContentLoaded',setSize)
})(window,document)
</script>

3、使用lib-flexible库

直接安装官网步骤操作即可，lib-flexible

二、将原来要设置的尺寸，转化成rem单位

假设设计图是375的，页面上一个元素的宽是100px，那么我们得转换成rem

1、手动计算

用计算器算。100px / html的font-size = 100 / 50 = 2，即 width = 2 rem

2、使用scss的函数或者less的混入来计算

@textColor:#12345678;
 
.poToRem(@px){
  // 375 -> 50   根据设计稿来的  设计稿375px  那就 / 50
  result:1rem * (@px / 50)
}
 
 
// 使用less
.box{
  // 利用混入来设定
  width: .poToRem(100)[result];
  height: .poToRem(100)[result];
}
 
p{
  font-size: .poToRem(16)[result];
}

3、使用postcss-pxtorem插件

3.1、安装插件

npm install postcss-pxtorem --save-dev

3.2、在postcss.config.js中配置

module.exports = {
  plugins: [
    require('postcss-preset-env'),
    // 使用这个插件
    require('postcss-pxtorem')({
      rootValue: 37.5, // 设计稿宽度的1/10
      propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
      exclude: /node_modules/i // 忽略的文件
    })
  ]
};