vue-cli3.0引入postcss-pxtorem和lib-flexible 移动端适配

postcss-pxtorem配合lib-flexible,非常方便,vue-cli3.0后,项目配置被大大精简了。

安装 flexible和 postcss-px2rem(命令行安装)

npm install lib-flexible --save
npm install postcss-pxtorem --save-dev
或者:
npm install postcss-px2rem --save-dev

postcss-pxtorem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据<html>标签的font-size值来计算出结果,1rem=html标签的font-size值。

引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

配置postcss-pxtorem

1.vue.config.js中配置

放在vue-cli3 项目中vue.config.js中(vue-cli3默认情况下没有vue.config.js,需要手动在项目根目录创建)
//待补充

2.postcss-pxtorem 在postcss.config.js中配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,//
      propList: ['*']// 设置哪些属性可以从px变为rem。“!”表示不匹配,“ !font* ”表示不匹配字体相关属性
    }
  }
}

或者postcss-px2rem

module.exports = {
  css: {
      loaderOptions: {
        css: {},
        postcss: {
          plugins: [
            require('postcss-px2rem')({
              remUnit: 75
            })
          ]
        }
      }
  }
}

配置完成后,重启一下项目。

使用

下面来看我们的代码,代码中我们直接用px来写宽高:


image.png
image.png

再来看下html根字体的大小


image.png

image.png

rootValue:通常我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把rootValue设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
即:如果你设计稿的长度是750基数的可以将rootValue的值修改为75

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值