Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

希望增加全宽的数值配置,比如我要转换为 rpx 单位,全宽应该是 750,现在固定是 100只能转换为 vh 和 vw 。 #176

Open
zoujingli opened this issue Apr 4, 2024 · 2 comments

Comments

@zoujingli
Copy link

希望增加全宽的数值配置,比如我要转换为 rpx 单位,全宽应该是 750,现在固定是 100只能转换为 vh 和 vw 。

image

@zoujingli
Copy link
Author

使用配置及案例:

image

image

image

@zoujingli
Copy link
Author

zoujingli commented Apr 5, 2024

临时上传插件 postcss-unit-unit 已支持转 rpx ,使用 uniapp 开发,统一使用 rpx 管理方案,当然还保留了原来的可配置参数以支持更多的需求。

这个插件是使用 postcss 8.x 接口实现,不会再提示 postcss-px-to-viewport: postcss.plugin was deprecated.

安装

npm i postcss-unit-unit --save

vite.config.ts 配置

import { defineConfig } from "vite";
// @ts-ignore
import uni from "@dcloudio/vite-plugin-uni";
import px2rpx from 'postcss-unit-unit';

export default defineConfig({
	base: "./",
	plugins: [uni()],
	envPrefix: ["APP_", "VITE_"],
	css: {
		postcss: {
			plugins: [
				px2rpx({
					unitToConvert: 'px',
					viewportWidth: 375,
					unitPrecision: 5,
					propList: ['*'],
					viewportUnit: 'rpx',
					fontViewportUnit: 'rpx',
					fullViewportWidth: 750,
					selectorBlackList: [],
					minPixelValue: 1,
					mediaQuery: false,
					replace: true,
					exclude: undefined,
					include: undefined,
					landscape: false,
					landscapeUnit: 'rpx',
					landscapeWidth: 568
				})
			]
		}
	}
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant