当前位置: 首页 > news >正文

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

现在的电脑屏幕和尺寸越来越多样化,对于前端开发来说,适配各种屏幕成了大难题,开发中一个实际例子:开发一个导航栏,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样式,不进行转换})]}},

http://www.lryc.cn/news/153890.html

相关文章:

  • Python Opencv实践 - 矩形轮廓绘制(直边矩形,最小外接矩形)
  • 大数据HBASE的详细使用
  • Sentinel 流量控制框架
  • leetcode原题: 跳水板
  • 深度学习入门(Python)学习笔记1
  • 苏州想要获得融资融券低利率账户的方法?怎么开融资融券账户?
  • 【LeetCode周赛】LeetCode第359场周赛
  • vue3+ts+tinynce在富文本编辑器菜单栏实现下拉框选择
  • 前端UI组件库深度解析:构建现代化的用户体验
  • leetcode 1326. Minimum Number of Taps to Open to Water a Garden
  • C++日期类的基本实现
  • 第六章:数据结构与算法-part3:数据结构算法提升
  • keras深度学习框架通过卷积神经网络cnn实现手写数字识别
  • Springboot启动异常 Command line is too long
  • PXE 装机(五十)
  • C++ 虚函数与纯虚函数
  • 警告:Provides transitive vulnerable dependency maven:org.yaml:snakeyaml:1.30
  • 中文命名实体识别
  • WPF CommunityToolkit.Mvvm Messenger通讯
  • 【杂言】写在研究生开学季
  • 渗透测试漏洞原理之---【任意文件读取漏洞】
  • 合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image)
  • 仿京东 项目笔记2(注册登录)
  • Spark与Flink的区别
  • 未来智造:珠三角引领人工智能产业集群
  • 【Unity db】sqlite
  • Linux 指令心法(四)`touch` 创建一个新的空文件
  • 分类算法系列②:KNN算法
  • 12. 微积分 - 梯度积分
  • Large Language Models and Knowledge Graphs: Opportunities and Challenges