页面自适应postcss-pxtorem配置

一、项目背景

uniapp+vue3+ts+vite+pinia+vant

二、安装postcss-pxtorem

npm i postcss-pxtorem

三、vite.config.ts配置

import pxtorem from "postcss-pxtorem";

export default defineConfig({
	plugins: [
		uni(),
		Components({
			resolvers: [VantResolver()]
		})
	],
	css: {
		postcss: {
			plugins: [
				pxtorem({
					rootValue: 16, // 指定根元素的字体大小（一般是设计稿宽度的1/10，但设置为16px更方便我自己）
					propList: ["*"], // 对所有属性进行转换，不进行白名单过滤，如果指定列表，则只对其进行转换
					// selectorBlackList: ['.no-rem', /^.van-/] // 过滤掉开头是 .no-rem 的class，或者包含 .van- 的class
					selectorBlackList: [".no-rem"]	// 页面中不需要进行rem转换的元素，加个no-rem的classname就行
				})
			]
		}
	}
});

四：行内style转rem配置

虽然现在可以正常转rem了，但是写在行内的style中px还是px，不会转rem

1. 在main.ts页面加一个方法，挂载到全局

// main.ts

function px2rem(px: string): string {
	if (/%/i.test(px)) return px;	// 如果带有%就不处理
	else return parseFloat(px) / 16 + "rem";	、、
}


export function createApp() {
	const app = createSSRApp(App);
	app.use(Pinia.createPinia());
	app.config.globalProperties.$px2rem = px2rem;	// 挂载到全局
	return {
		app,
		Pinia
	};
}

2. 在项目根目录下创建一个名为 global.d.ts 的文件，下边的代码复制粘贴进去

import { App } from 'vue';

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $px2rem: (value: string) => string;
    }

    interface App {
        $px2rem: (value: string) => string;
    }
}

declare module 'vue' {
    interface App {
        $px2rem: (value: string) => string;
    }
}

3. 修改tsconfig.json页面的配置，在include中添加一项：“global.d.ts”

4. 页面中使用

<div class="test" :style="{ padding: $px2rem('30px') }">你说得对</div>