Vue移动端适配vw和 postcss-px-to-viewport使用

安装

npm

npm i postcss-px-to-viewport -D

pnpm

pnpm i -D postcss-px-to-viewport

项目配置

postcss.config.js

module.exports = {
	plugins: {
		'postcss-mobile-forever': {
			appSelector: '#app',
			viewportWidth: 375,
			maxDisplayWidth: 640,
			enableMediaQuery: true,
			disableMobile: true
		},
		'postcss-px-to-viewport-8-plugin': {
			unitToConvert: 'px',
			viewportWidth: file => {
				let num = 750
				if (file.indexOf('van') > 0) {
					num = 375
				}
				return num
			},
			unitPrecision: 5,
			propList: ['*'],
			viewportUnit: 'vw',
			fontViewportUnit: 'vw',
			selectorBlackList: [],
			minPixelValue: 1,
			mediaQuery: true,
			replace: true,
			exclude: [/node_modules\/vant/i],
			include: [],
			landscape: false,
			landscapeUnit: 'vw',
			landscapeWidth: 1628
		}
	}
}

其中的postcss-mobile-forever解决vw在电脑打开不能限制最大宽度

安装

npm install --save-dev postcss postcss-mobile-forever

掘金其他相关文章