vue3使用autofit.js，vue3单位自动转换

autofit.js

安装：npm install autofit.js -S

使用：

import autofit from 'autofit.js';
onMounted(() => {
    autofit.init({
        el: '#page',
        dw: 375,
        dh: 667
    })
})
   * - 传入对象，对象中的属性如下：
   * - el（可选）：渲染的元素，默认是 "body"
   * - dw（可选）：设计稿的宽度，默认是 1920
   * - dh（可选）：设计稿的高度，默认是 1080
   * - resize（可选）：是否监听resize事件，默认是 true
   * - ignore(可选)：忽略缩放的元素（该元素将反向缩放），参数见readme.md
   * - transition（可选）：过渡时间，默认是 0
   * - delay（可选）：延迟，默认是 0

postcss-px-to-viewport

安装：npm install postcss-px-to-viewport -S

使用：根目录 vite.config.js 下

import postcsspxtoviewport from 'postcss-px-to-viewport'
export default defineConfig({
	css: {
		postcss: {
			plugins: [
				postcsspxtoviewport({
					unitToConvert: 'px', // 要转化的单位
					viewportWidth: 375, // UI设计稿的宽度，如果你的设计稿是375就改成375  
          viewportHeight: 667,
					unitPrecision: 6, // 转换后的精度，即小数点位数
					propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
					viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
					fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
					selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
					minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
					mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
					replace: true, // 是否转换后直接更换属性值
					exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
					landscape: false, // 是否处理横屏情况
				}),
			]
		}
	}
})