大屏可视化适配2k，4k，8k屏幕

vue3+vite项目：
使用postcss-pxtorem插件将代码中的px单位转换为rem单位，并且使用css媒体查询屏幕宽度，宽度不同时，改变html的fontsize值

配置 Vite

在 vite.config.js 文件中，配置 PostCSS 使用 postcss-pxtorem 插件。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// 引入 postcss 和 postcss-pxtorem
import postcssPresetEnv from 'postcss-preset-env';
import pxtorem from 'postcss-pxtorem';
 
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postcssPresetEnv(), // 使用预设环境插件以支持未来的 CSS 特性
        pxtorem({
          rootValue: 16, // 基准大小，根据设计稿的宽度来定，例如设计稿是750px，那么 rootValue 就是 75
          propList: ['*'], // 可以选择转换的属性，* 表示全部转换
          selectorBlackList: [] // 指定不转换为 rem 的类名
        })
      ]
    }
  }
});

在index.html文件中：

<style>
  html {
        font-size: 16px;
      }
    @media screen and (min-width: 2560px ) {
      html {
        font-size: 21.33px;
      }
    }
 
    @media screen and (min-width: 3840px) {
      html {
        font-size: 32px;
      }
    }
 
    @media screen and (min-width: 7680px) {
      html {
        font-size: 64px;
      }
    }
 
    

  </style>

2K、4K和8K屏幕分辨率的定义和区别如下‌：

‌2K分辨率‌：通常指2560 x 1440像素（QHD或1440p），总像素数大约为370万。有些情况下，2048 x 1080（电影行业标准）也被称为2K，总像素数大约为220万‌

2K分辨率提供比1080p（Full HD）更清晰的图像，细节更丰富‌

‌4K分辨率‌：通常指3840 x 2160像素（UHD或2160p），总像素数大约为830万。也有4096 x 2160（电影行业标准）的4K，总像素数大约为880万‌

4K分辨率提供比2K更清晰的图像，细节更加锐利和精细，在更大的屏幕上这种差异会更加明显‌

‌8K分辨率‌：通常指7680 x 4320像素，总像素数约为3300万。8K分辨率提供了极高的清晰度和细节，适合大屏幕显示和专业应用场景‌