当前位置: 首页 > 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样式,不进行转换})]}},

相关文章:

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

现在的电脑屏幕和尺寸越来越多样化,对于前端开发来说,适配各种屏幕成了大难题,开发中一个实际例子:开发一个导航栏,ui给的是1920*60的尺寸,前端开发的时候,在自己电脑缩放比例中开发的&#xff…...

Python Opencv实践 - 矩形轮廓绘制(直边矩形,最小外接矩形)

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/stars.png") plt.imshow(img[:,:,::-1])img_gray cv.cvtColor(img, cv.COLOR_BGR2GRAY) #通过cv.threshold转换为二值图 ret,thresh cv.threshold(img_gray,…...

大数据HBASE的详细使用

摘要:本文将深入探讨大数据HBASE的使用步骤,帮助读者了解和掌握这一强大的分布式数据库系统的基本概念和操作技巧。通过本文的阅读,读者将能够熟悉HBASE的基本设置,了解其核心概念,掌握基本的查询和管理操作&#xff0…...

Sentinel 流量控制框架

1. Sentinel 是什么? Sentinel是由阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件。 2. 主要优势和特性 轻量级,核心库无多余依赖,性能损耗小。 方便接入,开源生态广泛。 丰富的流量控制场景。 …...

leetcode原题: 跳水板

题目: 你正在使用一堆木板建造跳水板。有两种类型的木板,其中长度较短的木板长度为shorter,长度较长的木板长度为longer。你必须正好使用k块木板。编写一个方法,生成跳水板所有可能的长度。 返回的长度需要从小到大排列。 示例&…...

深度学习入门(Python)学习笔记1

第1章 Python入门 1.1python是什么 Python是一个简单、易读、易记的编程语言,而且是开源的,可以免费地自由使用。 使用Python不仅可以写出可读性高的代码,还可以写出性能高(处理速度快)的代码。 再者,在…...

苏州想要获得融资融券低利率账户的方法?怎么开融资融券账户?

想要获得融资融券低利率账户,可以通过以下几种方式: 选择低费率的券商:不同券商的费率不同,一些券商会提供低利率的融资融券账户,可以通过咨询券商或者比较不同券商的费率来找到最佳账户。 提升自身信用:获…...

【LeetCode周赛】LeetCode第359场周赛

LeetCode第359场周赛 判别首字母缩略词k-avoiding 数组的最小总和销售利润最大化找出最长等值子数组 判别首字母缩略词 给你一个字符串数组 words 和一个字符串 s ,请你判断 s 是不是 words 的 首字母缩略词 。 如果可以按顺序串联 words 中每个字符串的第一个字符…...

vue3+ts+tinynce在富文本编辑器菜单栏实现下拉框选择

实现效果 代码&#xff1a; <script lang"ts" setup> import Editor from tinymce/tinymce-vue import tinymce from tinymce; import { getIndicator } from /api/data-assets/data-dictoryimport {computed, ref} from "vue"; const props defin…...

前端UI组件库深度解析:构建现代化的用户体验

引言 在当今的前端开发中&#xff0c;UI组件库已经成为了我们工具箱中不可或缺的一部分。这些库可以极大地提高我们的工作效率&#xff0c;同时也使我们能够专注于实现真正的业务逻辑&#xff0c;而不是重复地编写UI代码。本篇博客将详细地探讨UI组件库的核心概念&#xff0c;…...

leetcode 1326. Minimum Number of Taps to Open to Water a Garden

x轴上的花园范围为[0,n], 0~n这个n1个离散点上有水龙头&#xff0c;第 i 个水龙头能浇水的范围为[i-ranges[i], iranges[i]]. 求能浇整个花园的最小水龙头个数。 思路&#xff1a; 方法一&#xff1a; greedy 先把每个水龙头能浇的区间准备好&#xff0c; 用一个数组保存所有…...

C++日期类的基本实现

前言 对于许多出初学C的同学来说首先接触的第一个完整的类便是日期类&#xff0c;这个类能有效的帮助我们理解C中有关类的初始化以及重载的相关知识&#xff0c;帮助我们轻松上手体验C的魅力。 文章目录 前言一、日期类整体初概二、构造2.1 判断日期是否合法2.2 构造函数 三、…...

第六章:数据结构与算法-part3:数据结构算法提升

文章目录 一、排序算法1.1 插入排序1、直接插入排序2、折半插入排序3、希尔排序 1.2、交换排序法1、起泡排序2、快速排序 1.3 选择类排序1、简单选择排序 二、业务逻辑算法设计2.1 基本概念和术语2.2 静态查找表2.3、有序表的查找 一、排序算法 排序是数据处理过程中经常使用的…...

keras深度学习框架通过卷积神经网络cnn实现手写数字识别

昨天通过keras构建简单神经网络实现手写数字识别&#xff0c;结果在最后进行我们自己的手写数字识别的时候&#xff0c;准确率堪忧&#xff0c;只有60%。今天通过卷积神经网络来实现手写数字识别。 构建卷积神经网络和简单神经网络思路类似&#xff0c;只不过这里加入了卷积、池…...

Springboot启动异常 Command line is too long

Springboot启动异常 Command line is too long Springboot启动时直接报异常 Command line is too long. Shorten command line for xxxxxApplication or also for Spring Boot default解决方案: 修改 SystemApplication 的 Shorten command line&#xff0c;选择 JAR manife…...

PXE 装机(五十)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、PXE是什么 二、PXE的组件 三、配置vsftpd 四、配置tftp 五、准备pxelinx.0文件、引导文件、内核文件 ​六、配置dhcp 七、创建default文件 八、配置pxe无人值守…...

C++ 虚函数与纯虚函数

目录 1. 虚函数 2. 纯虚函数 C 中的虚函数和纯虚函数都是实现多态的重要机制。多态可以让不同的对象以相同的方式进行操作&#xff0c;从而简化代码的编写和维护。 1. 虚函数 虚函数是一种在基类中声明的函数&#xff0c;可以在派生类中进行重写。在运行时&#xff0c;根据对…...

警告:Provides transitive vulnerable dependency maven:org.yaml:snakeyaml:1.30

1. 警告 SpringBoot 的 validation 依赖包含有易受攻击的依赖 snakeyaml。 警告信息如下&#xff1a; Provides transitive vulnerable dependency maven:org.yaml:snakeyaml:1.30 意思是&#xff1a;提供了可传递的易受攻击依赖 maven:org.yaml:snakeyaml:1.30 2. 警告示例 …...

中文命名实体识别

本文通过people_daily_ner数据集&#xff0c;介绍两段式训练过程&#xff0c;第一阶段是训练下游任务模型&#xff0c;第二阶段是联合训练下游任务模型和预训练模型&#xff0c;来实现中文命名实体识别任务。 一.任务和数据集介绍 1.命名实体识别任务 NER&#xff08;Named En…...

WPF CommunityToolkit.Mvvm Messenger通讯

文章目录 环境WeakReferenceMessenger方法介绍无回调订阅发送Token区分有回调订阅发送 环境 CommunityToolkit.Mvvm Messenger 十月的寒流: 如何使用 CommunityToolkit.Mvvm 中的 Messenger 来进行 ViewModel 之间的通信 WeakReferenceMessenger 我这里只讲简单的弱Messenger…...

从星座图乱麻到清晰:手把手教你用OpenOFDM搞定Wi-Fi信号频偏校正

从星座图乱麻到清晰&#xff1a;手把手教你用OpenOFDM搞定Wi-Fi信号频偏校正 当你第一次用软件无线电&#xff08;SDR&#xff09;捕获Wi-Fi信号时&#xff0c;看到的星座图像是被猫抓过的毛线团——杂乱无章的斑点毫无规律地散布在平面上。这种令人沮丧的场景&#xff0c;正是…...

RTSP拉流播放器开发实战:用FFmpeg和SDL2解析H264 RTP流

RTSP拉流播放器开发实战&#xff1a;用FFmpeg和SDL2解析H264 RTP流 在实时视频监控、在线直播等场景中&#xff0c;RTSP协议因其低延迟和可靠性成为主流选择。本文将深入探讨如何从零构建一个RTSP客户端播放器&#xff0c;重点解决H264 RTP流的接收、解析与渲染难题。不同于简单…...

从蓝图到落地:基于IEEE 830标准构建数字化车间需求规格说明书

1. 为什么数字化车间需要IEEE 830标准&#xff1f; 在汽车制造车间推进数字化转型时&#xff0c;我见过太多团队一上来就急着写代码、买设备&#xff0c;结果系统上线后才发现功能与业务脱节。这时候IEEE 830标准就像一份施工蓝图&#xff0c;它能帮我们把模糊的"数字化愿…...

从零开始:3步掌握MifareOneTool,轻松玩转NFC卡片管理

从零开始&#xff1a;3步掌握MifareOneTool&#xff0c;轻松玩转NFC卡片管理 【免费下载链接】MifareOneTool A GUI Mifare Classic tool on Windows&#xff08;停工/最新版v1.7.0&#xff09; 项目地址: https://gitcode.com/gh_mirrors/mi/MifareOneTool 你是否曾被复…...

【热门开源项目下载】yolo-onnx-java

【热门开源项目下载】yolo-onnx-java 1. 项目基础介绍与编程语言 yolo-onnx-java 是一个基于Java语言开发的轻量级AI模型调用框架&#xff0c;专注于为Java开发者提供高效、便捷的深度学习模型推理能力。项目通过ONNX&#xff08;Open Neural Network Exchange&#xff09;格式…...

OpCore-Simplify:如何30分钟完成专业级黑苹果配置

OpCore-Simplify&#xff1a;如何30分钟完成专业级黑苹果配置 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的黑苹果配置而烦恼吗&#x…...

ABAP 7.40+新语法实战:5个内表处理技巧让你告别LOOP和IF

ABAP 7.40新语法实战&#xff1a;5个内表处理技巧让你告别LOOP和IF 在SAP开发领域&#xff0c;ABAP语言随着7.40版本的发布迎来了一次重大革新。对于每天需要处理大量内表操作的中级开发者来说&#xff0c;这些新特性不仅能显著减少代码量&#xff0c;更能提升程序的可读性和执…...

别只盯着S21!用ADS仿真LNA时,这3个容易被忽略的细节(稳定性、实际元件模型、噪声圆)才是成败关键

别只盯着S21&#xff01;用ADS仿真LNA时这3个关键细节才是成败关键 在射频前端设计中&#xff0c;低噪声放大器&#xff08;LNA&#xff09;的性能往往决定了整个系统的信噪比表现。许多工程师在使用ADS进行LNA仿真时&#xff0c;常常满足于S21参数达到预期就匆忙进入制版阶段&…...

FPGA与Jetson异构计算:破解机器视觉高带宽实时处理难题

1. 项目概述&#xff1a;当FPGA遇上Jetson&#xff0c;一台为视觉而生的“小钢炮”在机器视觉和工业检测这个行当里干了十几年&#xff0c;我经手过不少号称“高性能”的嵌入式系统。它们要么是体积硕大、功耗惊人的工控机&#xff0c;要么是接口单一、扩展性堪忧的嵌入式板卡。…...

保姆级教程:用YOLOv8和Pyside6从零搭建一个火焰烟雾检测桌面应用(附完整源码和数据集)

从零构建火焰烟雾检测桌面应用&#xff1a;YOLOv8与Pyside6实战指南 在工业安全、家庭监控和实验室防护场景中&#xff0c;火焰与烟雾的早期检测至关重要。传统监控系统依赖人工值守或简单传感器&#xff0c;难以实现精准的实时预警。本文将带你用Python生态中最前沿的YOLOv8目…...