UnoCSS + Vant + VW 适配

记录下近期项目 H5 项目使用 UnoCSS + Vant 进行 VW 适配。

安装 UnoCSS

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

配置 UnoCSS

需要安装@unocss/preset-rem-to-px

// uno.config.ts
import { defineConfig } from 'unocss';
import presetUno from '@unocss/preset-uno';
import presetRemToPx from '@unocss/preset-rem-to-px';

export default defineConfig({
	presets: [
		presetUno(),
		presetRemToPx({
			baseFontSize: 4, // 设置为4，实现w-1=1px
		}),
	],
	// 其他配置
});

安装 postcss-px-to-viewport-8-plugin

pnpm

pnpm add -D postcss-px-to-viewport-8-plugin

yarn

yarn add -D postcss-px-to-viewport-8-plugin

npm

npm install -D postcss-px-to-viewport-8-plugin

新建 postcss.config.js

此时插件会将上面的 px 单位转换成 vw。

// postcss.config.js
module.exports = {
	plugins: {
		'postcss-px-to-viewport-8-plugin': {
			viewportWidth: 375, // 设计图以375px为基准
		},
	},
};