利用vw的原理做适配.使用第三方库postcss-px-to-viewport
由于上述库只能转化css中的样式,不能转化行内样式,所以又使用了style-vw-loader
具体配置代码如下
1.创建postcss.config.js文件
const path = require('path');
module.exports = ({ webpack }) => {
// vant的设计稿是按照375px去设计的,要做适配
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中做如下配置,为了转化行内样式
chainWebpack: (config) => {
config.module
.rule('vue')
.test(/\.vue$/)
.use('style-vw-loader')
.loader('style-vw-loader')
}
- 完结,如果UI给的是750的设计稿,就该设计稿上的尺寸写就行
