移动端适配，iphonex兼容性处理

记录下开发项目中遇到的问题

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">