显示屏分辨率计算

问题描述

今天研究了下我的笔记本显示屏的分辨率问题,我的笔记本是 联想 拯救者 Y9000K 2019SE

显示器的尺寸如下所示

在这里插入图片描述

尺寸、分辨率、DPI计算

17.3英寸的显示屏,那么长和宽分别是(英寸和毫米之间的换算是25.4)

长为

17.3 × 16 9 2 + 1 6 2 = 15.0783 inch = 382.9877 mm 17.3 \times \frac{16}{\sqrt{9^2+16^2}} =15.0783\text{inch}=382.9877\text{mm} 17.3×92+162 16=15.0783inch=382.9877mm

宽为

17.3 × 9 9 2 + 1 6 2 = 8.4815 inch = 215.4306 mm 17.3 \times \frac{9}{\sqrt{9^2+16^2}} =8.4815\text{inch}=215.4306\text{mm} 17.3×92+162 9=8.4815inch=215.4306mm

显示屏的分辨率为 1920 × 1080 1920\times1080 1920×1080,以此来计算DPI和像素数

DPI指的是dots per inch,即每英寸点数,windows系统的DPI是96 ,在MATLAB里面是输入get(0)可以得到

在这里插入图片描述

计算显示屏像素数:

长度上

17.3 × 16 9 2 + 1 6 2 × 96 = 1447.5 17.3 \times \frac{16}{\sqrt{9^2+16^2}} \times96=1447.5 17.3×92+162 16×96=1447.5

宽度上

17.3 × 9 9 2 + 1 6 2 × 96 = 814.2 17.3 \times \frac{9}{\sqrt{9^2+16^2}} \times96=814.2 17.3×92+162 9×96=814.2

计算出的像素数量1447.5与814.2均与1920和1080不一致,这个不知道为什么,开个坑以后再填

### 实现网页适配不同显示屏分辨率的方法 为了确保网页能够在多种设备和屏幕上良好显示,采用响应式设计成为一种必要手段。这种设计理念允许网页根据访问者的屏幕尺寸自动调整其布局和样式[^1]。 #### 使用CSS媒体查询实现响应式设计 媒体查询是响应式设计中的核心技术之一,它可以根据设备的不同特性应用特定的样式规则。下面是一个简单的例子,展示了如何利用媒体查询针对不同屏幕宽度设置字体大小: ```css /* 默认全局样式 */ body { font-family: Arial, sans-serif; } /* 针对大屏幕设备 */ @media (min-width: 1200px) { body { font-size: 18px; } } /* 对于中型屏幕如平板电脑 */ @media (min-width: 768px) and (max-width: 1199px) { body { font-size: 16px; } } /* 移动端小屏幕 */ @media (max-width: 767px) { body { font-size: 14px; } } ``` 这段代码定义了几种情况下的`font-size`变化逻辑,当视窗宽度小于等于767像素时,文字会变小;而随着屏幕逐渐增大到超过1200像素,则会使字号相应增加[^2]。 除了控制文本外,还可以通过类似的机制管理图片和其他组件的比例关系,从而保持整个页面的一致性和美观度[^3]。 #### Viewport Meta标签的作用 为了让移动浏览器正确渲染页面并支持触摸缩放等功能,在HTML文档头部加入如下meta标签是非常重要的: ```html <meta name="viewport" content="width=device-width, initial-scale=1"> ``` 此标签告诉浏览器按照实际物理像素而非虚拟宽高来计算页面尺寸,并初始化比例尺为1倍放大率,这样可以有效防止某些老旧版本Android系统默认过度拉伸的情况发生。 #### 利用现代CSS布局方式增强灵活性 对于更复杂的场景,建议结合使用弹性盒子(Flexbox)或网格布局(Grid),这两种方法提供了更加直观的方式去构建复杂多样的UI结构,同时也更容易配合媒体查询完成精细化的设计需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值