Mobile terminal adaptation, iphonex compatibility processing

Record problems encountered during development projects

1. The plug-in used on the mobile terminal is vant. To solve vant adaptation, the rem layout is adopted, and the postcss-pxtorem plug-in is used to automatically convert to rem.

Install postcss-pxtorem version 5.1.1. The version must be greater than 5.0.0 to take effect. The configuration is the same as vant official website.

Install  amfe-flexible ,  lib-flexible is deprecated

// 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 notch screen processing

 Add a style to the body. The style will only take effect under iOS. The effect is that the page will be displayed in the safe and operable area of ​​​​the mobile phone. If absolute positioning is used for the head and bottom, you need to add margin-top:constant(safe-area-inset-top) or directly bottom:constant(safe-area-inset-bottom). Set the distance from the top and 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 set meta viewport-fit = cover

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">