这次分享一下我自己常用的一套移动端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同样适用。
