vue移动端适配(postcss-pxtorem和amfe-flexible)

18 篇文章 0 订阅
15 篇文章 1 订阅

一、移动端适配(postcss-pxtorem和amfe-flexible)
在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配)
实现思路:①通过postcss-pxtorem实现将px转成rem,②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件,我们就可以实用设计稿的px来进行开发了。
1.安装postcss-pxtorem和amfe-flexible
Npm install postcss-pxtorem --save-dev
Npm install amfe-flexible --save
2.在vue的main.js中引入amfe-flexible
import ‘amfe-flexible’;
3.在.postcssrc.js中配置,vue-cli3.0的版本在postcss.config.js中配置

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

基本配置就完成了,rootValue这个值可以自己配置,如过你设计稿的长度是750基数的可以将rootValue的值修改为75

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值