利用vw的原理做適配.使用第三方庫postcss-px-to-viewport
由于上述庫只能轉(zhuǎn)化css中的樣式,不能轉(zhuǎn)化行內(nèi)樣式,所以又使用了style-vw-loader
具體配置代碼如下
1.創(chuàng)建postcss.config.js文件
const path = require('path');
module.exports = ({ webpack }) => {
// vant的設(shè)計稿是按照375px去設(shè)計的,要做適配
const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
return {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: designWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
}
}
2.在vue.config中做如下配置,為了轉(zhuǎn)化行內(nèi)樣式
chainWebpack: (config) => {
config.module
.rule('vue')
.test(/\.vue$/)
.use('style-vw-loader')
.loader('style-vw-loader')
}
- 完結(jié),如果UI給的是750的設(shè)計稿,就該設(shè)計稿上的尺寸寫就行
