vue3+ts+vite3（1920 * 1080） px转换rem

在Vue 3 + TypeScript + Vite 3项目中，可以通过以下步骤将像素(px)转换为rem单位：

1. 定义一个函数来计算根元素(html)的字体大小。
2. 在组件的mounted生命周期钩子中设置根元素的字体大小。
3. 创建一个全局方法来将像素单位转换为rem。

以下是具体实现：

首先，在项目中创建一个新的JavaScript文件或TypeScript文件，用于处理rem转换。例如，创建一个util.ts文件：

// util.ts
const baseSize = 16; // 假设1rem等于16px
 
// 将px转换为rem的函数
export function pxToRem(px: number): string {
  return `${px / baseSize}rem`;
}
 
// 在Vue组件中使用
import { pxToRem } from './util';
 
export default {
  mounted() {
    // 设置根元素字体大小
    const width = window.screen.width;
    const initialFontSize = width / 1920 * baseSize; // 假设目标宽度是1920px
    document.documentElement.style.fontSize = `${initialFontSize}px`;
  },
  methods: {
    convertPxToRem(px: number) {
      return pxToRem(px);
    }
  }
};

在Vue组件中，你可以这样使用convertPxToRem方法：

<template>
  <div :style="{ fontSize: convertPxToRem(24) }">这是24px大小的文字</div>
</template>
 
<script lang="ts">
import Vue from 'vue';
import { pxToRem } from './util';
 
export default Vue.extend({
  mounted() {
    // 设置字体大小的逻辑
  },
  methods: {
    convertPxToRem: pxToRem
  }
});
</script>

在上述代码中，我们定义了一个基础大小baseSize，通常情况下1rem等于16px。在组件的mounted生命周期中，我们根据屏幕宽度动态计算并设置根元素的字体大小。pxToRem函数用于将像素单位转换为rem单位。在模板中，你可以直接使用convertPxToRem方法来转换你需要的像素值。