分辨率与缩放规则

最新推荐文章于 2024-04-26 22:14:41 发布
最新推荐文章于 2024-04-26 22:14:41 发布
阅读量1.1k 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vivi0323/article/details/127364352
版权

浏览器的放大，其实本质是分辨率的缩小，那么其他元素不变，才形成放大的效果，所以只需要监听分辨率，就可以实现对缩放效果的控制

找到常规的分辨率与缩放的组合

1920分辨率下
1745(110%)
1536(125%)
1280(150%)

1680分辨率下
1528(110%)
1344(125%)
1120(150%)

1440分辨率下
1310(110%)
1152(125%)
 960(150%)

_global_active
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
浏览器缩放前端处理
weixin_34358365的博客
02-20 6334
如果用户缩放了浏览器，前端页面布局很可能会紊乱，出现横向滚动条或者一些元素掉落等。 缩放的本质 浏览器缩放到底做了些什么呢。本质是调整了屏幕单位物理尺寸可显示的css像素比例：devicePixelRatio。放大的情况下，在dpr为1的屏幕下是让1个css像素大于1个物理像素，dpr为2时，1个css像素大于0.5个物理像素。（这里涉及到各种像素的定义，本人总结的易于理解的说法，但是不够精确） ...
VMware虚拟机安装教程及使用方法分享
03-05
vmware虚拟机安装教程VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享VMware虚拟机安装教程及使用方法分享
计算机桌面放大了,电脑桌面好像被放大了,怎么处理?
weixin_35363322的博客
06-21 4174
可通过以下两种方法解决桌面图标和网页被放大问题：一、通过分辨率修改1、首先鼠标右键点击桌面出现下拉菜单，在点击下拉菜单下面的属性。2、点击属性以后会出现显示属性窗口，在窗口上面点击右上角的设置按钮。3、点击设置按钮以后进入设置窗口，在设置窗口的屏幕分辨率下面把指针从少往多的方向移，是屏幕分辨率由800*600像索调成1280*800像索，然后点击窗口下面的确定按钮。4、点击确定按钮以后出现监视器设...
浏览器内部缩放与浏览器窗口缩放
weixin_34279246的博客
08-18 634
接到一个需求，要做网页的自适应。要求网页在不同的分辨率下显示出相应的效果。 之前一直很模糊，浏览器内部的缩放是不是就能模拟出不同的分辨率呢？解释起来有点复杂。 1：浏览器内部的缩放是指网页在浏览器内部的显示比例。在chrome里面 通过Ctrl+/-来调节。 举个例子：比如桌面的分辨率是1920*1080，浏览器窗口大小没有改变，你的网页的显示默认是100%情况下。 如果减...
设备分辨率与像素密度对网页缩放的影响
gcfkh的博客
04-09 2474
此处设置一个默认分辨率 1920*1080 , 设备尺寸15.6吋. （一般笔记本尺寸和分辨率） 默认dpi（win屏幕一般为72或96dpi） (PS默认新建文档默认值72, 72一般在网络上传输,300dip用于输出打印) 当设备的分辨率和设备尺寸不变的情况下，设备屏幕dpi（win屏幕一般为72或96dpi）在高于某个值（72或96dpi）的时候。屏幕的dpi就会影响网页缩放（从而影响网页布...
前端-关于分辨率和屏幕大小关系的浅谈
H_shaohui的博客
10-31 1333
最近在工作中，总有些非前端小伙伴在问分辨率和屏幕的大小关系问题，故在此记录一下，方便不清楚的小伙伴订阅观看。
大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条）
sxww_zyt的博客
04-30 7169
本篇记录了大屏的三种缩放（按分辨率进行缩放、窗口分辨率缩放 + 等比缩放 + 留白(窗口始终呈现等比之后的页面)和窗口分辨率缩放 + 等比缩放 + 不留白而改用滚动条）的具体实现，记录于此，可供个人学习和参考，如有更好的办法，请斧正~
保障在不同的分辨率百分比情况下，网页缩放比例适合用户浏览
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-05 310
console.log(`系统字体缩放比例为：${Math.round(dpi * 100)}%`);// 获取设备的物理像素比例。在以下几种比例下面网页显示的文字太大以至于无法正常观看，用上面的css代码即可解决此问题。获取win10系统字体放大百分比、倍数、比例、字号大小_你挚爱的强哥的博客-CSDN博客。
有关显示器的缩放比例和分辨率的设置问题
热门推荐
qq_48795482的博客
09-08 1万+
今天我们来讨论桌面——》显示设置中的这两个功能。 缩放比例： 首先我们要知道计算机的显示器图像的显示是靠底层的发光片来实现的（每个发光片都是一个像素点）。而大显示器和小显示器每个像素点的大小不同，但是如果缩放比例相同的话（假如都是100%），由于每个桌面图标占用的像素点的个数是固定的，而它们的分辨率也相同，所以大显示器和小显示器所能容纳桌面图标的个数是相同的。但在相同距离下看两种显示器，大显示器的像素点大一些，所以图标看着大一些，而小显示器的图标看起来则小一些。因此，你会发现一种现象，大...
前端网页兼容电脑笔记本分辨率放大125%、150%的办法
qq_32886245的博客
03-09 1万+
有的电脑就是玩儿，哎非要默认125%或者150%的放大，还特喵的是推荐！ css /* 屏幕分辨率放大为 150 */ @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 120dpi) { .app-main { transform: scale(0.665, 0.665); /* 缩放数值需要根据效果调试 */ transform-origin: left top; } } /*
数据可视化大屏自适应，保持比例不变形，满足不同分辨率的需求-利用transform的scale属性缩放，缩放整个页面
01-09
8、8400*3150的分辨率大屏页面(不规则)比例效果演示。 适合人群： 1、具备一定前端基础，熟悉CSS的开发者。 能学到什么： 1、做大屏项目时，需要适配不同屏幕，且在任意屏幕下保持16:9的比例，保持显示效果一致，...
xBRZ，“按规则缩放” - Zenju 的高质量图像放大滤镜
02-07
xBRZ 是一款高质量的图像放大滤波器，用于从低分辨率图像创建精美的高清表示。 常见仿真器DOSBox、 ScummVM、xBRZ、Kega Fusion、ePSXe、HqMAME、Snes9x都是参考此软件实现的。 保留小图像要素的规则集 高度优化的...
xBRZ:xBRZ：“按规则缩放”-Zenju提供的高质量图像放大过滤器-开源
05-08
xBRZ是一种高质量的图像放大滤镜，用于从低分辨率图像创建漂亮的高清图像。 常见仿真器的参考实现可在下载部分找到：●DOSBox●ePSXe●HqMAME●ScummVM●Snes9x●Kega Fusion ...
enhanceZoom.js:防止缩放页面（或整个页面）上的某些元素，为具有数学表达式的元素设置自定义缩放因子
05-08
window.devicePixelRatio是一个window属性，用于返回设备的物理像素分辨率与CSS像素分辨率之比。 所有现代浏览器都支持它。 （请参阅 ）通过使用此属性， enhancedZoom.js可将CSS规则动态添加到文档的head 。
datavisualization:vue数据可视化不规则大屏项目
04-06
分辨率 115202160 可调整为 76801440 缩放1.5倍查看 Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes ...
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 273
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
基于 Flexbox 的纯 CSS 框架：兼容性好、文档丰富 | 开源日报 No.232
开源服务指南
04-23 346
想要快速搭建现代化的网页界面吗？不妨试试基于 Flexbox 技术的现代 CSS 框架 bulma 吧！bulma 提供快速安装方式，兼容性良好，不含 JavaScript 部分，让您的网页在主流浏览器上运行良好。丰富的文档和在线浏览功能，让您快速上手，让网页设计变得更加简单和高效。快来尝试 bulma，让您的网页设计更上一层楼！
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 494
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
【React】CSS 局部样式
最新发布
小秀的博客
04-26 124
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
css 适应各种分辨率
09-06
CSS适应各种分辨率是通过使用响应式设计来实现的。响应式设计是一种使网页在不同设备上的不同分辨率下都能呈现良好效果的方法。以下是一些实现CSS适应各种分辨率的方法： 1. 使用百分比单位：使用百分比单位来定义网页元素的尺寸，如宽度、高度和边距等。这样可以使元素的尺寸相对于其父元素的尺寸进行缩放。这样，在不同分辨率下，元素的尺寸会自动适应。 2. 使用媒体查询：媒体查询是一种CSS3的特性，可以根据不同的设备属性（如设备宽度、屏幕分辨率等）应用不同的样式。通过使用媒体查询，可以根据设备的分辨率自定义特定的CSS规则，从而实现不同分辨率下的布局及样式。 3. 弹性布局：使用flexbox布局可以根据不同分辨率自动调整元素的布局和尺寸。Flexbox布局提供了弹性容器和弹性项的概念，通过定义容器和项的特性，可以使项目在不同分辨率下灵活地进行伸缩和对齐。 4. 使用媒体单位：使用css的媒体单位，例如`vw`和`vh`，这些单位是相对于视口宽度和高度的百分比单位。可以通过将元素的尺寸设置为视口单位来实现在不同分辨率下适应的效果。 综上所述，通过百分比单位、媒体查询、弹性布局和媒体单位等方式，可以使CSS能够适应各种分辨率，从而实现在不同设备上都有良好的展示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值