网站建设服务商 需要什么主机,网站服务器买了后怎么做,企业用的邮箱是什么邮箱,仿《砍柴》网站程序文章目录参考描述像素分辨率显示分辨率图像分辨率物理分辨率分辨率单位#xff08;仅部分#xff09;DPIPPI设备像素比设备物理像素设备独立像素设备像素比产生放大与缩小尾声参考
项目描述关于物理像素、逻辑像素#xff08;css像素#xff09;、分辨率、像素比的超详细讲…
文章目录参考描述像素分辨率显示分辨率图像分辨率物理分辨率分辨率单位仅部分DPIPPI设备像素比设备物理像素设备独立像素设备像素比产生放大与缩小尾声参考
项目描述关于物理像素、逻辑像素css像素、分辨率、像素比的超详细讲解古达星球设备像素比devicePixelRatioxueli_2017百度百科查询搜索引擎[Bing](必应 (bing.com))
描述
项目描述操作系统Windows 10 专业版Edge110.0.1587.41 (正式版本) (64 位)物理分辨率1920 * 1080
像素
设备将图像显示到屏幕中是以一个个小方格为单位对图像进行绘制的这些小方格便是像素点也即像素。
分辨率
显示分辨率
显示分辨率是指显示器在显示图像时的分辨率。通常以显示器的一行像素数乘一列像素数的表达式来表示显示器的分辨率例如
显示分辨率 1980x1024 表示显示器的每一行可以容纳 1980 个像素点每一列可以容纳 1024 个像素点显示屏共可容纳 2027520 个像素点。
图像分辨率
图像分辨率即图像中存储的信息量通常以图像每一行所包含的像素点信息颜色值透明度等信息的数量乘每一列所包含的像素点信息的数量的表达式来表示图像分辨率。
图像分辨率即图像中存储的信息量在图像分辨率不变的情况下你若对图像进行放缩操作相关系统将做出如下行为 在你对图像进行放大操作时系统将通过相关算法对其进行像素补充。 在你对图像进行缩小操作时系统将通过相关算法对其进行像素剔除。
物理分辨率
物理分辨率描述了设备可用于显示的格子数在设备的生产过程中就已经被确定。物理分辨率决定了某一设备所能够支持的最大显示分辨率。
分辨率单位仅部分
除了使用 一行像素点数 乘 一列像素点数 的表达式来表示分辨率外还可以使用分辨率单位来表示分辨率的大小。
DPI
DPI 即 DOTS PER INCH每英寸点数该单位描述了每英寸距离含有多少个打印点。像素单位 DPI 常用于印刷领域。
PPI
PPI 即 Pixels Per Inch 每英寸像素数该单位描述了每英寸距离含有多少个像素点。
设备像素比
设备物理像素
设备物理像素在设备的生产过程中就已被指定单位为 pt 。你可以使用 1pt * 1pt 表示设备用于显示像素的物理格子的大小。
设备独立像素
设备独立像素即定义 UI 布局时所使用到的虚拟像素单位在网页设计过程中使用到的 px 等单位就是设备独立像素中的一种。程序在遇到设备独立像素时将通过一定的规则设备像素比将其转换为设备物理像素。
设备像素比
产生
由于屏幕尺寸及分辨率的不同同样分辨率大小的图片将以不同尺寸的物理大小厘米米等单位计量展示在设备中这会影响客户的体验。
举个栗子
在分辨率为 375*667 的设备中12px 大小的文字显示效果如下 而在分辨率为 750*1334 的设备中12px 大小的文字的显示效果为 为了减小屏幕尺寸及分辨率对网页页面的显示带来的影响设备像素比应运而生。
设备像素比
设备像素比与设备物理像素及设备独立像素的关系为
设备像素比 设备物理像素 / 设备独立像素设备像素比为设备独立像素到设备物理像素的转换提供了依据。以 iPhon SE 为例其物理分辨率为 750*1334 而其默认的设备像素比为 2因此 iPhone SE 显示网页内容时将使用 2pt 设备物理像素显示 1px 设备独立像素的所包含的内容显示内容的物理大小厘米米等物理单位与相同设备尺寸但分辨率为 375 * 667 的设备无异。
放大与缩小
网页的放大与缩小改变的内容其实是当前页面当前页面的放大或缩小并不会影响该浏览器的其他标签页所使用的设备像素比放大页面将增大设备像素比缩小页面将减小设备像素比。
在 JavaScript 中你可以使用如下代码输出当前设备在当前页面下使用的设备像素比。
console.log(window.devicePixelRatio);在浏览器的控制台位于浏览器的开发者工具中中你可以直接使用 window.devicePixelRatio 来输出当前设备在当前页面使用的设备像素比。
举个栗子 可以看到我的浏览器使用的默认设备像素比为 1.25 。现在我将对该页面缩放至 200% 。缩放完毕后我们再次观察其设备像素比。 可以看到在页面放大了两倍后设备像素比也放大了两倍。
尾声
欢迎建议 如果你对这篇博客右什么意见欢迎指出。
欢迎提问 如果各位对文章中的某些内容不太理解欢迎提问。