记录下开发项目中遇到的问题
1、移动端用的插件是 vant,解决vant适配,采用了rem布局,用的是postcss-pxtorem 插件自动转换为rem。
安装postcss-pxtorem 版本为5.1.1,版本要大于5.0.0,才会生效,配置就跟vant官网一样
安装 amfe-flexible, lib-flexible已废弃
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};
2、iphonex刘海屏处理
在body 加上一下样式, 样式只会在iOS下生效,效果是页面会在手机安全可操作区域显示。如果头部和底部用的是绝对定位的话,需要在其另外加上margin-top:constant(safe-area-inset-top)、或者直接bottom:constant(safe-area-inset-bottom) 即可。设置距离顶部,底部的距离
body {
margin: 0;
padding:
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left);
padding:
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);
box-sizing: border-box;
font-size: 13px;
}
index.html head设置meta viewport-fit = cover
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">