vue-cli项目使用px转rem插件

vue-cli项目使用px转rem插件

注:
之前使用 px2rem-loader 插件,但会影响Vant组件变小,
只能执行命令 npm uninstall px2rem-loader 卸载 px2rem-loader,
后改使用 postcss-pxtorem 插件,完美解决 Vant 组件变小的问题。


使用步骤:
1、index.html:
使用

2、安装:
postcss-pxtorem 与 lib-flexible 搭配推荐移动端使用;经测试:根字号大小不会根据页面尺寸宽度极限变大而变化,依据的页面最大尺寸宽度为540px)
npm install [email protected] lib-flexible --save

postcss-pxtorem 与 amfe-flexible 搭配推荐兼容PC端如大屏展示效果使用;经测试:根字号大小一直会根据页面尺寸宽度极限变大而变化)
npm install [email protected] amfe-flexible --save

3、在项目入口文件 main.js 中引入 lib-flexible 或 amfe-flexible
与 lib-flexible 搭配
import 'lib-flexible/flexible.js'
与 amfe-flexible 搭配
import 'amfe-flexible';

4、在 .postcssrc.js 中添加过滤

'postcss-pxtorem': {
  rootValue: 75, // 设计稿尺寸/75,如设计稿尺寸宽度750px,最终换算后为1rem=75px
  propList: ['*'], // 是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border','!border-top','!border-bottom','!border-left','!border-right']
  unitPrecision: 5, // 保留rem小数点多少位
  selectorBlackList: ['van','html'], // 忽略转换正则匹配项,对css选择器进行过滤的数组,px不会转rem
  mediaQuery: false, // 媒体查询( @media screen 之类的)中不生效
  minPixelValue: 4, // px小于4的不会被转换
}


 

你可能感兴趣的:(vue.js,vue.js,前端,javascript)