vue3+vite+ts项目适配各种分辨率解决方案

现在的电脑屏幕和尺寸越来越多样化，对于前端开发来说，适配各种屏幕成了大难题，开发中一个实际例子：开发一个导航栏，ui给的是1920*60的尺寸，前端开发的时候，在自己电脑缩放比例中开发的，但是到了其他人屏幕，比如2k屏幕或者缩放200%的笔记本上，高度就不一样了，为了解决这个问题，今天就来研究下怎么在各种分辨率下高都都保持不变，完全按照ui尺寸写

试过了根元素设置zoom和scale，但是效果都不理想，各种其奇奇怪怪bug 

第一步：首先安装依赖

npm install lib-flexible-computer

npm install postcss-px2rem-exclude

 第二步：在main.ts中导入：

import 'lib-flexible-computer'

第三步：vite.config.ts配置

import postCssPxToRem from 'postcss-px2rem-exclude';

和server平级

  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          remUnit: 192,  // 设计稿宽度/10
          exclude: /(node_modules)/   //过滤三发ui样式，不进行转换
        })
      ]
    }
  },