vue-移动端开发-样式适配方案
样式适配
场景:一个项目中既包含了web端也包含了移动端的页面,web端的一些样式不能在移动端正常显示
解决方式:
npm i postcss-px-to-viewport
项目目录下postcss.config.js
module.exports = {
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 3,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [".web-main", ".web-chat-list", ".web-msg"],
// 黑名单,不用转换以适配移动端的样式,按照每个vue页面中的scope来的
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 568,
},
},
};
ฅ平平庸庸的普通人ฅ
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步