移动端适配

一、常用单位

rem：基于 html 节点的字体大小，浏览器一般默认字体大小为 16px，即 1rem=16px。
em：基于当前区域内的字体大小，字体大小可从父级继承，也可在子级设定，若父级字体大小12px，则1em=12px。
vh：viewportHeight，视窗高度，该单位会把视窗宽度划分100份，如果宽为1334px，则1vh=13.34px。
vw：viewportWidth，其余同vw。

二、meta标签

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

viewport-fit：部分机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。

三、媒体查询实现响应式布局

媒体查询：

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}
@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}
@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}
@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

给不同的屏幕宽度设置不同的样式，用flex、rem作辅助，并且规定好不同尺寸下要展示、隐藏的部分，实现起来非常的麻烦。

做响应式布局的库有Bootstrap。

因为rem是基于html标签下的字体大小，可以根据浏览器窗口大小用JS代码调整，存在一定的耦合。

rem兼容性好。

四、自适应布局

主要作用同种终端下差别不太大的页面大小，一般都分别为PC和移动两端作各自的页面开发。

一般采用vh/vw单位，即使是用rem也是设置好根元素字体大小好，将视窗宽度划分为100份，模拟vh/vw的效果。

注意使用vh/vw开发的时候可能会出现无法整除的情况，可以辅以一些媒体查询来做好适配。

具体方法：

安装：
```
npm install postcss-px-to-viewport
```

使用：

// Vue项目使用，新建postcss.config.js
plugins:{
    "autoprefixer":{
      browsers: ['last 5 versions']
    },
    "postcss-px-to-viewport":{
      // 设计稿大小为iPhone5的大小
      viewportWidth: 320,//视窗宽度，对应设计稿宽度
      viewportHeight: 568,//视窗高度，对应设计稿高度
      unitPrecision: 5,//指定`px`转换为视窗单位值的小数位数
      viewportUnit: 'vw',//指定需要转换成的视窗单位
      // selectorBlackList: [],//指定不需要转换的类
      minPixelValue: 1,//小于或等于`1px`不转换为视窗单位
      mediaQuery: false,//允许在媒体查询中转换`px`
    }
  }
// Webpack
{
  loader: 'postcss-loader',
    options: {
    plugins: () => [
      require('autoprefixer')({
        browsers: ['last 5 versions']
      }),
      require('postcss-px-to-viewport')({
        viewportWidth: 375, //视口宽度（数字)
        viewportHeight: 1334, //视口高度（数字）
        unitPrecision: 3, //设置的保留小数位数（数字）
        viewportUnit: 'vw', //设置要转换的单位（字符串）
        selectorBlackList: [], //不需要进行转换的类名（数组）
        minPixelValue: 1, //设置要替换的最小像素值（数字）
        mediaQuery: false //允许在媒体查询中转换px（true/false）
      })
    ]
  }

五、预处理器函数转换单位

@function pxtorem($px){  //$px为需要转换的字号
    @return $px / 40px * 1rem; //40px为根字体大小
}
@function pxtovw($px){  //$px为需要转换的字号
    @return $px * (100/375) * 1vw;  // 375为视口宽度
}

六、参考

https://juejin.im/post/5e6121c8e51d4526dc7be724

https://juejin.im/post/5df59139518825123e7af459

https://juejin.im/post/5b5c7e1cf265da0f9f4e7381

https://juejin.im/post/5cddf289f265da038f77696c