一,问题

用vue开发一个h5移动端项目需要做适配;


二,适配方案

第一步:安装两个插件

npm install amfe-flexible --save   //不推荐lib-flexible
npm install postcss-pxtorem --save

第二步:在main.js文件中导入amfe-flexible

import 'amfe-flexible'

第三步:postcss.config.js中配置postcss-pxtorem

module.exports = {
    "plugins": {
        'postcss-pxtorem': {
            rootValue: 37.5,   //   设计稿 / 10
            propList: ['*']
        }
    }
}
// rootValue根据设计稿宽度除以10进行设置,这边假设设计稿为375,即rootValue设为37.5;

在这里插入图片描述

第四步:测试结果

在这里插入图片描述
在这里插入图片描述


Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐