vue移动端适配(vue-cli 3/4)

项目场景:

Vue项目H5页面,只要求适配移动端(vue 2.6 + @vue/cli 4.5.13)


问题描述:

以前做的 vue-cli 2.x 移动端适配我是用 lib-flexible + px2rem-loader ,然后这次 @vue/cli 4 用了它就不灵了,发现刷新页面样式缩小了,我擦。。。


原因分析:

后来翻阅了一些文档,由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方案。


解决方案:

使用 amfe-flexible + postcss-pxtorem
amfe-flexible 是配置可伸缩布局方案,主要是将1rem设为viewWidth/10
postcss-pxtorem 是postcss的插件,用于将像素单元生成rem单位。

  1. 安装 amfe-flexible 和 postcss-pxtorem
npm install amfe-flexible -S
npm install postcss-pxtorem -D
  1. 在入口文件 main.js 中引入
import 'amfe-flexible' // 引入适配包
  1. index.html 添加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  1. vue.config.js 配置如下
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5,
            propList: ["*"], //哪些属性需要转换成rem
            minPixelValue: 3, // 最小转换单位
          })
        ]
      }
    }
  },
}
  1. 重启项目,如果报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8 ,降低 postcss-pxtorem 版本就行了
npm i postcss-pxtorem@5.1.1

在这里插入图片描述


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值