这次分享一下我自己常用的一套移动端H5适配方案，几乎适配所有移动端设备。

一、假设你已经创建了一个项目，然后安装postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

二、在src文件夹中创建一个base.scss文件，写入以下代码：

// base.scss
$maxWidth: 540px;
@mixin MaxWidth {
    @media screen and (min-width: 540px) {
        @content;
    }
}

@mixin MaxWidth-center {
    @media screen and (min-width: 540px) {
        max-width: $maxWidth;
        left: 50%;
        transform: translateX(-50%);
    }
}
html {
    margin: auto;
    max-width: $maxWidth;
    height: 100%;
    font-size: 10vw;
    // background: #ccc;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    @include MaxWidth() {
        font-size: calc((#{$maxWidth} - 17px) / 10);
    }
}
body {
    margin: auto;
    max-width: $maxWidth;
    height: 100%;
    font-size: 16px;
    -webkit-text-size-adjust: none !important;
   
}

三、在vue.config.js文件中配置以下设置：

// vue.config.js
module.exports = {
...
css: {
        loaderOptions: {
            scss: {
                prependData: `@import "~@/base.scss";`
            },
            postcss: {
                plugins: [
                    require('autoprefixer')(),
                    require('postcss-px-to-viewport')({
                        unitToConvert: 'px',
                        viewportWidth: 7500,
                        unitPrecision: 5,
                        propList: ['*', '!max-width'],
                        viewportUnit: 'rem',
                        fontViewportUnit: 'rem',
                        selectorBlackList: ['html'],
                        minPixelValue: 1,
                        mediaQuery: false,
                        replace: true,
                        exclude: [/node_modules/],
                        landscape: false,
                        landscapeUnit: 'vw',
                        landscapeWidth: 568
                    })
                ]
            }
        }
    }
}

• 上面代码中配置的参数有不懂的请自行到文档上查看postcss-px-to-viewport
  进行到这一步，你就可以按照设计图（750）尺寸专心的写代码了。

四、我们来看下效果

在APP.vue文件写个div标签

<div class="ss">hello world!</div>

写一个简单样式

.ss {
    font-size: 30px;
    margin: 50px auto;
}

最后看下效果

image.png

• 可以看到，适配已经生效了。

五、我们再试下vant组件库的适配效果（假设你已npm了vant）

 <div class="ss">hello world!</div>
 <van-rate v-model="value" />

看下效果

image.png

• 这套方案基本能满足我们再移动端的适配要求了，如果遇到特殊的情况再根据实际需求做相应调整即可。
• 这套方案在vue3.0同样适用。