vue实现移动端适配方案(转载)

vue实现移动端适配方案

转载自原文地址:https://huaweicloud.csdn.net/638ee032dacf622b8df8d4f0.html


vue实现移动端适配步骤如下:

先安装amfe-flexiblepostcss-pxtorem

npm install amfe-flexible --save
npm install postcss-pxtorem --save

main.js导入amfe-flexible

import 'amfe-flexible';
module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            },
                  sass: {
                      // 配置scss文件全局变量,没有分号会报错
                      data: `@import "@ui/common.scss";` // 旧版sass-loader写法(8.0以下)
                      // prependData: `@import "@ui/common.scss";` // 新版scss-loader(8.0及以上)
                  }
        }
    },
}

.postcssrc.jspostcss.config.js中配置如下:

module.exports = {
   "plugins": {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}
  • rootValue根据设计稿宽度除以10进行设置,这边假设设计稿为375,即rootValue设为37.5
  • propList是设置需要转换的属性,这边*为所有都进行转换。

测试结果:

css中设置某类宽度为375px

.content{
  width:375px;
}

运行后在浏览器可以发现已经转化为10rem,即375/设置的rootValue

在这里插入图片描述

以上情况则说明postcss-pxtorem配置成功

html的字体大小跟随设备宽度进行改变,body跟随设备的dpr进行改变,这是amfe-flexible的实现,即说明配置成功。

说明,安装过程中可能会遇到以下报错:

  1. 安装配置后,发现rem并没有生效,解决办法:使用vue.config.js去配置,不要用postcss.config.js

  2. 抛错[object Object] is not a PostCSS plugin。报错原因:postcss-pxtorem版本太高,更改版本为5.1.1

    npm install postcss-pxtorem@5.1.1
    

完结。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值