当前位置: 首页 > 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…...

windows版vasp-6.5.1非Cygwin版

推荐使用oneapi版本&#xff0c;这个版本性能要好一点。 1.解压压缩包。 Gromacs&Vasp软.件.交.流&#xff1a;962946828 2.用VASP安装器添加系统环境变量&#xff08;选择bin目录所在目录的父级目录&#xff09;。 3.测试命令&#xff08;在cmd或者powershell执行&#…...

解码汽车ECU的“健康档案”:剖析吉利Basetech五大运行周期计数器(OCC)的协同诊断逻辑

1. 汽车ECU的“健康档案”是什么&#xff1f; 当你去医院体检时&#xff0c;医生会查看你的病历记录、化验报告和近期症状&#xff0c;综合判断你的健康状况。汽车ECU&#xff08;电子控制单元&#xff09;也有类似的"健康档案"&#xff0c;它就是吉利Basetech技术中…...

无人机开发者必看:如何基于QGC源码定制你的专属地面站?从环境搭建到第一个插件开发

无人机开发者必看&#xff1a;如何基于QGC源码定制你的专属地面站&#xff1f;从环境搭建到第一个插件开发 在无人机技术迅猛发展的今天&#xff0c;开源地面站软件QGroundControl&#xff08;QGC&#xff09;已成为行业标准工具之一。但对于追求个性化功能或特定应用场景的开发…...

DDD难落地?就让AI干吧! - cleanddd-skills介绍

一、什么是urllib3&#xff1f; urllib3 是一个用于处理 HTTP 请求和连接池的强大、用户友好的 Python 库。 它可以帮助你&#xff1a; 发送各种 HTTP 请求&#xff08;GET, POST, PUT, DELETE等&#xff09;。 管理连接池&#xff0c;提高网络请求效率。 处理重试和重定向。 支…...

救命!电路板维修高频故障排查口诀,背会秒上手,修板快准稳

修板半天没头绪&#xff1f;工控伺服板一修就慌&#xff1f;测遍元件还烧板&#xff1f;其实电路板故障排查不用死磕&#xff0c;一套好记的速记口诀&#xff0c;能帮你少走弯路、少赔成本&#xff0c;新手能快速上手&#xff0c;老手直接拉高效率&#xff0c;刷到这篇干货&…...

MultiAgentBench:一套真正评测多智能体协作与博弈能力的基准

摘要&#xff1a;大语言模型已经展现出作为自主智能体的显著能力&#xff0c;但现有基准要么只关注单智能体任务&#xff0c;要么局限于狭窄领域&#xff0c;无法刻画多智能体协作与竞争的动态过程。本文提出 MultiAgentBench&#xff0c;这是一个面向 LLM 多智能体系统的综合性…...

BEYOND REALITY Z-Image新手入门:三步生成你的第一张8K写真人像

BEYOND REALITY Z-Image新手入门&#xff1a;三步生成你的第一张8K写真人像 1. 为什么选择BEYOND REALITY Z-Image&#xff1f; 在当前的AI图像生成领域&#xff0c;写实人像一直是最具挑战性的任务之一。传统模型往往难以平衡细节精度与自然感&#xff0c;生成的图片要么过于…...

从T检验到回归:用SPSS搞定你的毕业论文数据分析(保姆级步骤+结果解读)

从T检验到回归&#xff1a;用SPSS搞定你的毕业论文数据分析&#xff08;保姆级步骤结果解读&#xff09; 当你面对堆积如山的问卷数据或实验记录时&#xff0c;是否曾感到无从下手&#xff1f;作为人文社科、经管或心理学领域的研究者&#xff0c;掌握SPSS这一统计利器至关重要…...

GetQzonehistory终极指南:三步永久备份你的QQ空间数字记忆

GetQzonehistory终极指南&#xff1a;三步永久备份你的QQ空间数字记忆 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 你是否也曾翻看QQ空间&#xff0c;发现那些承载青春记忆的说说正在…...

RWKV7-1.5B-g1a部署教程:CSDN平台外网域名(gpu-guyeohq1so-7860)配置要点

RWKV7-1.5B-g1a部署教程&#xff1a;CSDN平台外网域名&#xff08;gpu-guyeohq1so-7860&#xff09;配置要点 1. 模型简介 rwkv7-1.5B-g1a是基于RWKV-7架构的多语言文本生成模型&#xff0c;特别适合以下应用场景&#xff1a; 基础问答文案续写简短总结轻量中文对话 2. 环境…...