2K笔记本适配的问题（谁发明的2K笔记本，打死好吧） 2160分辨率

最新推荐文章于 2024-07-25 09:33:21 发布
最新推荐文章于 2024-07-25 09:33:21 发布
阅读量994 收藏
点赞数
分类专栏： 个人学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ForestRoar/article/details/108322557
版权
在开发Vue项目使用ElementUI时，遇到了2K分辨率屏幕下的显示问题，特别是当屏幕缩放至50%时，表格会出现位移。通过调整表格列宽度使其能被2整除，解决了缩放下的位移问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

说点废话，不想看的兄弟们直接看最后标红的结果~

最近写一个vue项目  用的elementUI

不同分辨率下，表格都没啥问题（我是按照1920写的）   结果老板的笔记本看的时候，表格居然移位了？？？

后来才知道，那是高端电脑！！！     2160*1440的分辨率！！！

然后我试着调试改分辨率，也没问题啊   后来试着缩放50%    得   果然出问题了

其实问题就是    那个笔记本是2K的分辨率   但是呢  笔记本宽度没有那么宽  所以就是2K分辨率  缩到50%   然后    样式出问题了

那么怎么解决呢？

当你设置的宽度可以除以2的时候，缩50%就不会出现位移的问题了

如果你问element那么多自适应宽度怎么解决？我目前用的是固定列，分辨率不同，但是表格列的宽度是相同的，不够就固定最后一列（我的最后一列的表头是操作）

半导体技术基础
吴建明wujianming_110117
04-13 3975
半导体技术基础 AI的许多数据处理涉及矩阵乘法和加法。大量并行工作的GPU提供了一种廉价的方法，但缺点是更高的功率。具有内置DSP模块和本地存储器的FPGA更节能，但它们通常更昂贵。 AI芯片该使用什么方法原理去实现，仍然众说纷纭，这是新技术的特点，探索阶段百花齐放，这也与深度学习等算法模型的研发并未成熟有关，即AI的基础理论方面仍然存在很大空白。这是指导芯片如何设计的基本前提。因此，集中在如何更好的适应已有的数据流式处理模式进行的芯片优化设计。
常见硬件术语手册
我的夹子
08-30 5028
一、CPU术语解释 　　 　　　　3DNow!： (3D no waiting)AMD公司开发的SIMD指令集，可以增强浮点和多媒体运算的速度，它的指令数为21条。 　　 　　　　ALU： (Arithmetic Logic Unit，算术逻辑单元)在处理器之中用于计算的那一部分，与其同级的有数据传输单元和分支单元。 　　 　　　　BGA：(Ball Grid Array，球状矩阵排列)一种芯片封
传统web 1920px适配iPad和所有的高分辨率大屏2K、4K、8K
qq_34701838的博客
07-25 1020
之前一直被网上的解决方案带偏，经过仔细的思考后决定还是不能使用像素比来处理缩放这样会存在偏差，其实解决很简单你只要拿到body的真是宽度就行然后除以设计稿的宽度就是你的缩放比，上代码。然后需要注意的一点就是页面在高清分辨率上字体要调整为自适应字体，以及各种动效页面注意怕错误留白需要收到调整下。
Vue适配数据大屏
丑小喵的博客
01-11 1474
vue适配数据大屏端
2K分辨率显示器调整缩放125%部分软件模糊的解决办法
寸草心的博客
03-02 9万+
1.桌面右键打开显示设置.(也可以在设置里找到’显示’选项) 2.点击右侧高级缩放设置.如图 3.在自定义缩放里输入125.(也可以根据需求自己设置),然后点击应用. 4.然后根据提示注销电脑即可. 也可以按win+L键注销电脑. ...
2k屏幕开多少缩放_酷比魔方Expand X便携显示器评测：13英寸+2K分辨率+反向充电...
weixin_34310322的博客
01-14 1156
随着我们手上的数码科技产品越来越多，移动办公、娱乐也逐渐成为不少朋友的日常，与之配套的便携显示器也逐渐由鸡肋变成了实用型产品。众所周知现在旗舰手机的性能越来越强大，在移动办公的时候已经可以替代笔记本电脑了，但手机的屏幕太小看着费力，这时候搭配便携显示器，不仅可以提升办公效率，也方便用户携带，可以说是继笔记本电脑之后的办公娱乐神器。早期的便携显示器，做的比较笨重，功能也比较单一。而现在的便...
720P、1080P、1440P、2160P、HD、FHD、UHD、2K屏、4K屏是什么意思
热门推荐
wangjun5159的专栏
02-19 13万+
1080P=1920*1080P，1080P中的p是progressive scanning，是逐行扫描的意思，1080p代表屏幕纵向有1080个像素点，横向是1920个像素点，因为1920约等于2000，也就是2K，如果显示器支持1080P，就称为2K屏，1920*1080约等于200万，所以1080p最多200万个像素。 同理，4K指的是3840*2160P，因为3840约等于4000，也就是4K，所以4K与2160P是一回事，可以看到3840*2160P横向、纵向格式1920*1080P的2倍，共4
解决方案——笔记本HDMI外接2k显示器如何调2k分辨率
学习让 Livius 快乐
11-07 10万+
为了让笔记本外接一个2K显示器，也是折腾了一段时间，网上很多种教程，都失败了。总结一下吧，可能大部分电脑都可以直接连上显示器匹配到2K的分辨率，但是要自己设置的话，还有一段路要走。 先介绍一下网上普遍提及的说法。 首先有说HDMI不支持2K分辨率的。这个显然是错的，HDMI线分几个版本，目前是1.4和2.0版本支持2K分辨率+60刷新率，更高的版本向下支持。博主试验后也成功调成了2560X14...
分辨率_分辨率科普
weixin_33711871的博客
12-12 6993
今天看见沈义人用正规标准 来定义3k 反而有很多人要出来指点。 主要这是数码圈某种约定成俗不严谨的说，那我今天想给大家科普一下1080p和2k、4k的关系与差别在哪里？大多数人都有这样一个误区(甚至可以直接说就是错误):以为1080p就是1920*1080，2k就是2560*1440，4k就是3840*2160等等固定的分辨率，还找了所谓xx国际标准来佐证，其实没这么简单，也没这么复杂没这么简单是...
Mac Catalina(10.15.2) 2K外接屏幕分辨率适配
Crane的博客
04-07 6352
工具 1、SCALED RESOLUTIONS 2、SwitchResX，下载地址如下，也可从官网下载最新版 链接:SwitchResX 密码:af0z 步骤 1、下载安装SwitchResX 2、重启Mac，关闭SIP 按住command+R，进入恢复模式（recovery mode）后，点击工具栏（Utilities）打开终端（Terminal） 3、终端中输入命令，关闭...
android 适配2k屏幕分辨率,Android设备兼容处理（二）：屏幕适配
weixin_39582708的博客
05-25 2591
前言要做好屏幕适配最重要的是了解当前市场设备分布，目前主流设备可以分为三类，4.7-5.5英寸的中屏手机，5.5-7.0的大屏手机，以及7.0英寸以上的平板。分辨率则是720P，1080P和2K。看一下实际开发场景：比如现在一台5.0英寸1080P(1080x1920)的手机,屏幕密度就是440dpi，dpi等级都是和160做比较，属于xxhdpi(超超高)，也就是常说的3X，屏幕宽度就是1080...
抗锯齿_《战地5》DLSS抗锯齿实测：帧率猛增40％ 画面模糊
weixin_35715402的博客
01-15 1575
昨日推送更新补丁后，《战地5》在已支持RTX光线追踪的基础上，又迎来了DLSS深度学习抗锯齿，首次将NVIDIA RTX 20系列的两大新技能合体，《地铁：离去》更是首发同步支持两种技术。我们曾在NVIDIA的展示以及《最终幻想15》中体验过DLSS，现在又如何呢？我们就拿《战地5》做了简单测试，驱动程序是NVIDIA刚发布的优化版本418.91。首先我们已经说过，无论《战地5》还是《地铁：离去》...
视屏清晰度，屏幕分辨率知识点
zz2230633069的博客
07-29 5401
分辨率（规范的分辨率标识都是大的在前面小的在后面，判别分辨率的等级最先看后面那个小的数值） 240p的分辨率最低是480x240 360p的分辨率最低是640x360 480p的分辨率最低是720x480 720p的分辨率最低是1280x720 1080p的分辨率最低是1920x1080,此外还有2280x1080等等， 2k的分辨率最低是2160x1440，此外还有2560x1440...
1080p最佳hidpi分辨率_完美适配2K显示器 macOS11.0.1开启HiDPI教程
weixin_39664774的博客
01-10 1万+
虽说苹果系统对于高分辨率的显示器兼容较好，但是针对2K分辨率显示器，如果我们选择2540×1440的分辨率，整体的图标都会变得很小，如果选择1080p，图标和文字虽然变大但是会变得十分模糊，影响整个屏幕的观感体验。而在Mac系统下，我们可以选择手动开启HiDPI，来达到让现实效果更为清晰的体验。HiDPI其实就是使用横纵 2 个物理像素也就是 4 个物理像素来显示 1 个像素区域，结果就是图像的细...
qgraphicsview 缩放的时候场景不会滚动_检测浏览器缩放黑科技
weixin_39727706的博客
12-05 240
背景有时候用户浏览器进行了缩放，影响到打印布局。在我看来如果用户有意识的去对网页进行缩放，那么就应该知道缩放会破坏布局。还有很多用户其实压根不知道自己是何时对网页进行了缩放，此时就需要提醒用户应该将浏览器的缩放级别重置成默认的比例。如何检测利用最小字体特性先看个例子，贴在控制台const 正常的时候放大110%的时候缩小90%的时候所以可以利用 fontSize !== '12px' 来判断是否开...
解决高分辨率屏幕老版软件适配问题
suedar的小屋子
08-20 1万+
自从买了4K屏电脑啊，简直像是去眼镜店配了新眼镜似的，看东西贼清晰，贼喜欢hhhhhh 然鹅，打开PS CS6 我就懵逼了啊  这屏幕 这叫一个小 这是给人看的吗！！ 简直反人类 于是百度了 各种方法 有国外大神说可以改注册表什么的  在这里安利一下最简单的方法  右键不合适分辨率的老版软件 》 属性 》 兼容性 》 这图片真是贼大 把应用
高分辨率远程桌面字太小_笔记本上用高分辨率真的没用？来看看2K和1080P对比就知道了...
weixin_39616798的博客
11-24 4733
笔记本电脑目前的分辨率以1080P为主，当然还有一些差一点的，也有很高的，比如13英寸2K的，15.6或17英寸4K等等，笔记本分辨率的改变基本都是跟随视频分辨率升级的。1080P分辨率可是06年出现的标准，都这么久了，不管是笔记本还是台式机显示器，为何1080P还是主流分辨率？是因为1080P够用了吗？2K或4K只是鸡肋？我们常说的分辨率其实有两种意思，一种是图像分辨率(图片或视频)，指的是图像...
时间格式转换 Mon Aug 17 2020 16:29:29 GMT+0800 (中国标准时间)
ForestRoar的博客
08-17 5582
留个记录，回头直接拿着用 // Mon Aug 17 2020 16:29:29 GMT+0800 (中国标准时间) 转 年月日时分秒 function timeD(time) { let d = new Date(time), data = { 'year': d.getFullYear(), 'month': this.timeP(d.getMonth() + 1), 'day': this.timeP(...
微信卡券 前端部分 小程序send-coupon组件 uniapp使用
ForestRoar的博客
06-23 1691
微信真的够垃圾的，一个api不明不白就算了，官方示例还带误导的 他的注释 内部为自定义代码 这个其实就是误导 你把整个send-coupon 组件看成一个按钮就行 那个<view>领取</view> 根本就是画蛇添足 如果是uniapp的话 如果想要本地生效，需要去修改微信模块的配置文件 在这个位置 最后许个愿望，希望我国能早点出现另外一家能在社交软件这块和腾讯对抗的公司，腾讯现在这种垄断地位是真的太坑了。。。 ...
autofitjs 2k分辨率适配
最新发布
01-21
### 使用 AutofitJS 实现 2K 分辨率下的网页适配 为了确保浏览器能够充分利用 3200×1800 的高分辨率显示器并提供良好的用户体验，AutofitJS 可以帮助实现响应式的布局调整。以下是具体的实现方法： #### 安装 AutofitJS 库 首先，在项目中引入 AutofitJS 库。可以通过 npm 或者直接下载文件的方式安装。 ```bash npm install autofitjs ``` 或者在 HTML 文件头部加入 CDN 链接: ```html <script src="https://cdn.jsdelivr.net/npm/autofitjs@latest/dist/autofit.min.js"></script> ``` #### 初始化 AutofitJS 并配置参数 接下来初始化 AutofitJS，并设置目标容器和适应策略。这里假设有一个名为 `container` 的 div 元素作为根节点。 ```javascript import { AutoFit } from 'autofitjs'; // 获取要自动调整大小的目标 DOM 节点 const container = document.getElementById('container'); // 创建一个新的 AutoFit 实例 new AutoFit({ target: container, designWidth: 1920, // 设计稿宽度，默认为 1920 px maxWidth: window.innerWidth * devicePixelRatio || 3200, // 设置最大宽度为当前窗口内宽度乘以像素比率或固定值 3200px }); ``` 这段代码设置了设计稿的基础宽度为 1920 像素，并允许页面根据视窗的实际尺寸动态计算合适的缩放比例[^1]。 #### 处理图片和其他媒体资源 针对不同 DPI 下的图像加载问题，建议使用矢量图形（SVG）代替位图；对于必须使用的位图，则应准备多个版本（如 @1x,@2x,@3x），并通过 CSS media queries 来选择合适版本展示给用户[^2]。 ```css /* Example */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){ .logo { background-image: url('/images/logo@2x.png'); } } ``` 此外还可以利用 JavaScript 动态检测用户的设备特性，从而更精准地控制内容呈现方式。 #### 解决非标准比例拉伸的问题 当遇到非整数倍缩放时可能会引起元素变形的现象，此时可通过设定固定的宽高比来防止这种情况发生。例如，对于视频播放器这样的组件来说，可以这样做： ```html <div class="video-wrapper"> <iframe frameborder="0" allowfullscreen></iframe> </div> <style> .video-wrapper { position:relative; padding-top:56.25%; /* 16:9 Aspect Ratio */ } .video-wrapper iframe{ position:absolute; top:0;left:0;width:100%;height:100%; } </style> ``` 这种方法能有效避免因屏幕纵横比差异而导致的内容被裁剪或挤压失真现象[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值