vue移动端适配方案:amfe-flexible和postcss-pxtorem插件结合
一,问题用vue开发一个h5移动端项目需要做适配;二,适配方案第一步:安装两个插件第二步:在main.js文件中导入amfe-flexible第三步:postcss.config.js中配置postcss-pxtorem第四步:测试结果
·
一,问题
用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;

第四步:测试结果


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



所有评论(0)