這次分享一下我自己常用的一套移動端H5適配方案沪猴，幾乎適配所有移動端設(shè)備麸俘。
一、假設(shè)你已經(jīng)創(chuàng)建了一個項目吵瞻，然后安裝postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
二葛菇、在src文件夾中創(chuàng)建一個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文件中配置以下設(shè)置：
// 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
})
]
}
}
}
}
- 上面代碼中配置的參數(shù)有不懂的請自行到文檔上查看postcss-px-to-viewport
進行到這一步眯停，你就可以按照設(shè)計圖（750）尺寸專心的寫代碼了济舆。
四、我們來看下效果
在
APP.vue文件寫個div標簽
<div class="ss">hello world!</div>
寫一個簡單樣式
.ss {
font-size: 30px;
margin: 50px auto;
}
最后看下效果
image.png
- 可以看到莺债，適配已經(jīng)生效了滋觉。
五、我們再試下vant組件庫的適配效果（假設(shè)你已npm了vant）
<div class="ss">hello world!</div>
<van-rate v-model="value" />
看下效果
image.png
- 這套方案基本能滿足我們再移動端的適配要求了齐邦，如果遇到特殊的情況再根據(jù)實際需求做相應(yīng)調(diào)整即可椎侠。
- 這套方案在vue3.0同樣適用。
