移动端自动适配方式

1.使用px布局

既根据设计图进行制作，让UI制作时考虑兼容性，留下足够的安全区域，这种方式对小屏幕手机兼容性不是很好，会产生超出屏幕的现象，但是市场上主流手机都是正常适应的，同时这种方式比较简单，直接根据设计图进行界面搭建即可，项目中不需要进行多余的其他配置

2.使用rem布局

使用rem布局方式兼容性更好，界面进入时加载一个js，动态计算屏幕宽度，然后进行相应的rem转换（或者使用媒体控制的方式，根据不同的屏幕宽度设置html的font-size为不同的值），rem的兼容性更方便，但是需要注意在引入js时，需要吧该js在css之前进行加载，要不然会产生一个界面闪烁的现象，需要尤其注意一下。

3.使用vw布局（当前个人使用的方式，Vue工程）

首先声明:

使用vw布局时，iOS中图片无法显示问题，解决方案：在img标签外加一层div，图片的宽高在div中进行设置 ，然后img标签设置：width:100%;

例：

<div class="show-img">
  <img src="....."  width="100%"/>
</div>


<style>
  .show-img {
      width: 50px;
      height: 50px;
  }
</style>

1.首先工程引入所需要的依赖

cnpm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --save-dev   

2.在.postcssrc.js文件中进行相应的设置（如果有cli脚手架搭建的工程，自动携带该文件，如果没有改文件，则新建即可）

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,     // (Number) The width of the viewport.
            viewportHeight: 1334,    // (Number) The height of the viewport.
            unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
            viewportUnit: 'vw',     // (String) Expected units.
            selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
            minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

注意：特别声明：由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。另外，如果anvanced报错，直接删除改行即可。

3.界面根据UI图直接进行界面搭建即可，编译之后就会发现，布局方式已经自动转换成了vw

该文章部分引用https://blog.csdn.net/zjw0742/article/details/79337336
详情参考该文章