zoukankan      html  css  js  c++  java
  • 分辨率,PPi,DPI,DPR,物理像素,逻辑像素

    屏幕尺寸:指的是屏幕对角线的长度

    分辨率:是指宽度上和高度上最多能显示的物理像素点个数

    点距:像素与像素之间的距离,点距和屏幕尺寸决定了分辨率大小

    PPI:屏幕像素密度,即每英寸(1英寸=2.54厘米)聚集的像素点个数,这里的一英寸还是对角线长度

    DPI:每英寸像素点,印刷行业术语。对于电脑屏幕而言和PPI是一个意思

    设备像素(又称为物理像素): 指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,和屏幕尺寸大小有关,单位 pt。

    设备独立像素(也叫密度无关像素或逻辑像素):可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),这个点是没有固定下小的,越小越清晰,然后由相关系统转换为物理像素。

    css像素(也叫虚拟像素):指的是 CSS 样式代码中使用的逻辑像素,在 CSS 规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位,相对的是设备像素(device pixel)

    DPR(设备像素比):设备像素比 = 设备像素 / 设备独立像素。(在Retina屏的iphone上,DPR为2,1个css像素相当于2个物理像素)

    为什么Retina需要二倍图显示?如果设计师给你了7501334的设计稿(主流手机分辨率),如果是普通手机,750px的宽就是100%宽,因为他的物理分辨率和逻辑分辨率相同。而在DPR为2的屏幕上,显示的却是200%,因为浏览器认为屏幕的分辨率是375667,所有以在为移动端制作网页时,把DPR为1的"initial-scale=1.0"这样设置,把DPR为2的"initial-scale=0.5"这样设置,这样宽度750px在两种屏幕下宽度都是100%显示。所以使用二倍图才能让图片的显示效果在Retina上达到最佳。
    在移动开发中,DPR是可以获取的,这样我们就可以动态改变initial-scale
    参考:
    http://www.cnblogs.com/libin-1/p/7148377.html
    http://www.cnblogs.com/xianyulaodi/p/5533201.html
    http://div.io/topic/1092
    http://www.ayqy.net/blog/完全理解px-dpr-dpi-dip/

  • 相关阅读:
    mysql导入导出sql文件
    linux 监控文件变化
    LeetCode:595.大的国家
    LeetCode:176.第二高的薪水
    LeetCode:182.查找重复的电子邮箱
    Excel学习笔记:行列转换
    通过数据分析题目实操窗口函数
    Oracle学习笔记:窗口函数
    Python学习笔记:利用爬虫自动保存图片
    电商数据分析基础指标体系(8类)
  • 原文地址:https://www.cnblogs.com/yesyes/p/7638607.html
Copyright © 2011-2022 走看看