泉州网站建设工作室东莞网站推广企业

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

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

第一步：首先安装依赖

npm install lib-flexible-computernpm install postcss-px2rem-exclude

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

import 'lib-flexible-computer'

第三步：vite.config.ts配置

和server平级

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