`rem`适配适配（项目笔记）

rem适配适配（记录）

1. 安装 postcss-pxtorem和amfe-flexible

   npm install postcss-pxtorem --save-dev
   
   npm i amfe-flexible
   

2. 在main.js中引入amfe-flexible

   import 'amfe-flexible'
   import 'amfe-flexible/index.js'
   

3. 在vue.config.js中进行配置

   module.exports = {
       css: {
           // css预处理器配置
           loaderOptions: {
               postcss: {
                   plugins: [
                       require('postcss-pxtorem')({ // 把px单位换算成rem单位
                           rootValue({ file }) { // vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                               return file.indexOf('vant') !== -1 ? 37.5 : 75;
                           },
                           // rootValue: 37.5, // vant官方使用的是37.5 即375的设计稿
                           selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
                           propList: ['*'] // 配置哪些文件中的px需要转化为rem, *表示所有的都要转化
                       }),
                   ]
               }
           }
       }
   }
   

4. 在index.html头部加入手机端自适应meta

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

5. Ios 安全区域适配

<style>
      /* 规避安卓机 */
      @supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {
          /*padding-top: env(safe-area-inset-top);*/
          /*padding-left: env(safe-area-inset-left);*/
          /*padding-right: env(safe-area-inset-right);*/
          /*padding-bottom: env(safe-area-inset-bottom);*/

          body {
              /* 适配齐刘海 */
              /*padding-top: 20px;*/
              /*padding-top: constant(safe-area-inset-top);*/
              /*padding-top: env(safe-area-inset-top);*/

              /* 适配底部小黑条 */
              /*padding-bottom: 0;*/
              /*padding-bottom: costant(safe-area-inset-bottom);*/
              padding-bottom: env(safe-area-inset-bottom);
          }
      }
  </style>