为了账号安全,请及时绑定邮箱和手机立即绑定

设备像素、设备独立像素、CSS 像素

标签:
Html/CSS

设备像素:屏幕上的真实像素点。iphone6 的设备像素 750 * 1334,也就是说 iphone6 屏幕上有 750 * 1334 个像素点。

设备独立像素:操作系统定义的一种长度单位。iphone6 的设备独立像素 375 * 667,正好是设备像素的一半。

CSS 像素:CSS 中的长度单位,在 CSS 中使用的 px 都是指 CSS 像素。

为了从视觉上更好的区别设备像素和设备独立像素,下文中统一用 物理像素 来代表设备像素,用 独立像素 来代表设备独立像素。

早期的移动设备,只有物理像素,没有独立像素,在不缩放的前提下,CSS 中的 1px 就代表着 1 个物理像素。比如 iphone3 的物理像素是 320 * 480,那么 width: 320px; 的元素将会占满 iphone3 的屏幕宽度。

webp

iphone3.png

从 iphone4 开始,苹果公司便推出了所谓的 Retina 屏,物理像素变成 640 * 960,但是屏幕尺寸没有变化,也就是说单位面积上的物理像素的数量增加了,或者说屏幕密度增加了。如果还按照原来那样,1px CSS 像素由 1 个物理像素来渲染, 那么 width: 320px; 的元素只会占据半个屏幕的宽度。原来在 iphone3 上能够占满屏的网页,在 iphone4 上只会占一半的屏幕,同时 font-size: 20px; 的字体在 iphone4 上的尺寸也会缩小。

webp

iphone4.png

为了让同一个网页在 iphone4 和 iphone3 上的有相同的显示效果,引入了独立像素的概念。iphone4 的独立像素为 320 * 480,是 iphone4 的物理像素的一半,和 iphone3 的物理像素一样。也就是说,iphone4 上的 1 个独立像素 == 2 个物理像素。在 iphone4 上,在不缩放的前提下,CSS 中的 1px 便由 1 个独立像素来渲染,相当于 2 个物理像素。这样,width: 320px; 的元素由 320 个独立像素来渲染,也就是由 640 个物理像素来渲染,正好占满 iphopn4 的屏幕宽度。font-size: 20px; 的字体在 iphone3 和 iphone4 上的尺寸也相同,只不过在 iphone4 上的字体更清楚。

webp

iphone4-2.png

我们已经知道,iphone4 上,1 个独立像素 == 2 个物理像素,但是不是所有的设备上都这样。下图展示了不同型号的 iphone 的物理像素和独立像素 (设备分辨率代表物理像素,逻辑分辨率代表独立像素)。

webp

分辨率.png

为了描述不同型号的手机物理像素和独立像素之间的关系,引入了一个新的概念:设备像素比 devicePixelRatio。在 js 中通过 window.devicePixelRatio 查看。

devicePixelRatio = 物理像素 / 独立像素

iphone3: devicePixelRatio = 320 / 320 = 1
iphone4: devicePixelRatio = 640 / 320 = 2
iphone6Plus: devicePixelRatio = 1242 / 414 = 3

在 media 查询中,resolution 就代表着 devicePixelRatio。

@media (min-resolution: 2dppx) {  body {    color: red;
  }
}

上面的代码表示,在 devicePixelRatio >= 2 的设备上,字体颜色为红色。



作者:Karmack
链接:https://www.jianshu.com/p/93ffb715aeff


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消