使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem

2021-04-12 13:27

阅读：481

标签：监听窗口文件中 exports 介绍帮助计算 code exp

　　有时候我们为了前端页面可以匹配不同分辨率的屏幕，会使用rem来对页面进行布局，无论基础px值设置得多么好计算，在写rem数值的时候，都需要对设计图原始的px值进行一番换算。

　　有没有工具可以辅助我们自动进行计算，我只要写px值就好了呢？当然是有的，编辑器其实就可以配置插件来对数值进行换算。但是有时候，我们在使用一些第三方ui库时，也想要对他们的px值进行转换，该怎么办呢？

　　当当当当，来介绍一下两个好朋友，postcss-pxtorem 和 lib-flexible ，安装配置这两个依赖，我们就可以实现我们想要的功能啦。

　　1. 首先，我们来安装一下这两个包

　　npm安装方式：

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

　　yarn安装方式：

yarn add amfe-flexible
yarn add postcss-pxtorem --dev

　　2. 在main.js中引入lib-flexible

import ‘amfe-flexible‘

　　3. 配置postcss-pxtorem

vue-cli2配置方式：

　　　　在.postcss.js文件中的plugins下新增postcss-pxtorem的配置

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 192, // 根据设计图尺寸写，设计图是1920，就写192
        propList: [‘*‘], // 需要被转换的属性
        selectorBlackList: [] // 不进行px转换的选择器
    }
  }
}

vue-cli3配置方式：

　　　　在根路径下新增postcss.config.js文件（如果有，就不新增）

　　　　配置的内容与上相同

　　完成上述步骤后，就可以愉快得使用设计图里的px值进行代码编写了。如果设计图的宽度是1920，则给rootValue设置192就行，lib-flexible会帮助我们计算好根字体。

　　postcss-pxtorem也可单独使用，但是相应的我们得自己写一个根字体的计算代码，以及视图窗口大小变化的监听事件，比较起来，还是配合lib-flexible比较省时省力。

　　PS：如果部分设计样式不想转换为rem，可以将 px 改为 PX ，就不会对该数值进行转换了，但是这一点在 calc 计算属性中是不生效的，开发模式下没有问题，但是打包时会出现编译错误（截至postcss-pxtorem 4.0.1版本哈，后续也许作者会修复这个问题），这个时候需要配合 selectorBlackList 来设置一个class来取消px的转换。

使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem

标签：监听窗口文件中 exports 介绍帮助计算 code exp

原文地址：https://www.cnblogs.com/happymental/p/12397384.html

上一篇：PHP构造函数__construct()

下一篇：webView的使用（很多坑）

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem
文章链接：http://soscw.com/essay/74735.html

亲，登录后才可以留言！

使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem

评论

热门文章

推荐文章

最新文章

置顶文章