92  
查询码:00000316
使用插件自动将px转为rem
作者: 王宏奔 于 2022年02月25日 发布在分类 / 人防组 / 人防前端 下,并于 2022年02月25日 编辑

rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

PostCss

官方话术:是一个用JavaScript工具和插件转换CSS代码的工具。

声明:它不是 “ 预处理器 ”,因它没有像使用预处理那些功能,且能和预处理器结合使用;它也不是一个真正的 “ 后处理器 ”。因后处理器通常被视为在完成的样式表中根据CSS规范处理CSS,常做的是CSS属性添加浏览器私有前缀,但PostCSS并不局限于此。所以,最好的解释,它是个处理器(平台),拥有多样化的功能插件,可根据自己的需要配置需要的功能,甚至你自己都可编写PostCSS插件。

常用的插件有autoprefixer添加浏览器私有前缀,px自动化转rem需要什么插件? 答案是postcss-pxtorem

postcss-pxtorem

安装


npm i postcss-pxtorem --save
配置


项目下新建postcss.config.js文件


module.exports = {
  plugins: {
    'postcss-pxtorem': {
       //根元素字体大小
       rootValue: 16,
       //匹配CSS中的属性,* 代表启用所有属性
       propList: ['*'],
       //转换成rem后保留的小数点位数
       unitPrecision: 5,
       //小于12px的样式不被替换成rem
       minPixelValue: 12,
       //忽略一些文件,不进行转换,比如我想忽略 依赖的UI框架
       exclude: ['node_modules']
     }
  }
}

添加完毕,尝试重启下项目,使文件生效~

重启后,打开Chrome控制台,可以发现所有的px都被自动转化为rem。

也可以根据不同屏幕宽度进行等比缩放,新建rem.js文件,在main.js引用

const baseSize = 16
function setRem() {
  const scale = document.documentElement.clientWidth / 1920
  document.documentElement.style.fontSize = baseSize * scale + 'px'
}
setRem()
window.onresize = function () {
  setRem()
}







 推荐知识

 历史版本

修改日期 修改人 备注
2022-02-25 11:52:13[当前版本] 王宏奔 创建版本

  目录
    知识分享平台 -V 4.8.7 -wcp