标签:监听 窗口 文件中 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
在.postcss.js文件中的plugins下新增postcss-pxtorem的配置
module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 192, // 根据设计图尺寸写,设计图是1920,就写192 propList: [‘*‘], // 需要被转换的属性 selectorBlackList: [] // 不进行px转换的选择器 } } }
使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem
标签:监听 窗口 文件中 exports 介绍 帮助 计算 code exp
原文地址:https://www.cnblogs.com/happymental/p/12397384.html