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

让代码飞19262023-09-06 15:59

现在的电脑屏幕和尺寸越来越多样化，对于前端开发来说，适配各种屏幕成了大难题，开发中一个实际例子：开发一个导航栏，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配置

和server平级

复制代码

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