内容简介:什么是物理像素?什么是css像素?在“像素”,是一个名词,在不同的上下文中所描述的东西可能不一样,但是也可能存在一定关系。
什么是物理像素?什么是css像素?
在 《掌握web开发基础系列--长度单位》 这篇文章中已经介绍过了css像素单位--px,这篇文章详细探讨一下设备物理像素和css像素之间的关系。
“像素”,是一个名词,在不同的上下文中所描述的东西可能不一样,但是也可能存在一定关系。
两种像素
注:下面很多是直接引用参考文章中的描述,主要原因是原文写的很棒,为作者点赞!
物理像素
设备屏幕实际拥有的像素点,屏幕的基本单元,是有实体的。比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所有iPhone 6 总共有750*1334个像素点。
屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑)。
逻辑像素
也叫“设备独立像素”(Device Independent Pixel,DIP),可以理解为反映在CSS/JS程序里面的像素点, 也就是说css像素是逻辑像素的一种 。
除了css像素是逻辑像素还有其他常见的逻辑像素吗?
我们平时描述一张图片宽高时一般用 200px * 100px
,这里的 px
也是逻辑像素。
设备像素比(Device Pixel Ratio,DPR)
一个设备的物理像素与逻辑像素之比。
像素为什么会有“物理”和“逻辑”之分,它们之间什么区别?
其实在很久以前,的确是没区别的,CSS里写个1 px
,屏幕就给你渲染成1个实际的像素点,DPR=1,多么简单自然~
后来苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏,也就是说这种屏幕拥有的物理像素点数比非高清屏多4倍甚至更多。如果还按照DPR=1进行展示,那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4,这样的话由于图片在屏幕上的展示面积大大缩小,也会导致出现“看不清”的问题。
苹果公司既然推出了Retina技术,那么这种技术带来了高清展示福利的前提下也要解决“DPR=1”的问题。怎么解决呢?DPR!=1。苹果公司经过一系列技术使用4个乃至更多物理像素来渲染1个逻辑像素,这样一来,同样的CSS代码设置的尺寸,在Retina和非Retina屏幕上看起来大小是一样的,但在Retina屏幕上要精细得多。更多内容请阅读 《Retina (一种新型高分辨率的显示标准)》
在Retian屏上,DPR不再是1,而是大于1,比如2(iPhone 5 6 7 8)或3(iPhone 6 Plus等一系列Plus)或者为非整数(一些Android机),说不定还会涨。
举个例子,iPhone 6的物理像素上面已经说了,是750 * 1334,那它的逻辑像素呢?我们只需在iPhone 6的Safari里打印一下 screen.width
和 screen.height
就知道了,结果是 375 * 667,这就是它的逻辑像素,据此很容易计算出DRP为2。当然,我们还可以直接通过 window.devicePixelRatio
这个值来获取DRP,打印结果是2,符合我们的预期。
奇葩的iPhone 6 Plus
这里不得不提一下iPhone 6 Plus(以及同尺寸的其他果机),它的实际物理像素点个数是1080 * 1920,但如果你截个屏,你会发现截屏图片的宽高是1242 * 2208;浏览器的screen对象会告诉你,6 Plus的逻辑像素是414 * 736,正好是截屏宽度的三分之一, window.devicePixelRatio
值也为3。
所以现在我们有了3种不同的像素值?什么情况?
是这样的,iPhone 6 Plus系统定义的屏幕像素就是1242 * 2208,系统会自动把这些像素点塞进1080 * 1920个实际像素点来渲染,这个过程对于开发者是透明的,无需理会。
所以对于前端来说,可以直接把1242视为6 Plus的“物理像素”,包括UI小姐姐们出图也是以1242为标准的,因此不妨把1242 * 2208称为6 Plus的“设计像素”。
苹果这是要闹那样?
其实,当初苹果公司在确定6 Plus的DRP时,纠结了半天:选2吧,同样的字号在6 Plus上看起来比6更小,不好;选3吧,字又显得太大了,导致一屏能展示的内容还没有6多;最适合视觉的DRP值是2.46,但这样一个数字能把设计师和 程序员 们逼疯。最后就想出了引入“设计像素”这样一个两全其美的方案,既让开发者开心,又让用户爽,岂不美哉?
1px边框问题
在苹果的带动下,Retina技术在移动设备上已经成了标配,所以前端攻城狮必须直面如下事实:
1. 你想画个1px的下边框,但屏幕硬是塞给你一条宽度为2—3个物理像素的线。 2. 你没法像安卓或iOS的同事那样直接操纵物理像素点。 复制代码
这就是初级前端面试必考题之“1px边框问题”的由来。
1px边框问题的解法千奇百怪,各显神通,但以我的实践经验,最推崇的方法还是利用CSS3的 transform: scale
,因为简单直接、适用性和兼容性好。
你不是给我两个物理像素点吗?加个 transform: scale(0.5)
,只剩一个点了~
三个物理像素点?那就 scale(0.33)
!
使用CSS的 -webkit-min-device-pixel-ratio
媒体查询可以针对不同的DPR做出处理 ,下面以Less代码为例:
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ .border-bt-1px(@color) { position: relative; &::after { position: absolute; bottom: 0; width: 100%; height: 1px; background-color: @color; transform: scaleY(0.5); } } } 复制代码
上面介绍的是只有一边的情景,如果是四面都要有框,咋办?
那就画个DPR倍大小的矩形框,再 scale
一下,完事~
再次感谢原文作者!
以上所述就是小编给大家介绍的《掌握web开发基础系列--物理像素、逻辑像素、css像素》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 【译】只用 CSS 就能做到的像素画/像素动画
- 透明度叠加算法:如何计算半透明像素叠加到另一个像素上的实际可见像素值(附 WPF 和 HLSL 的实现)
- 开源人工智能算法一种新颖的超像素采样,网络深层特征估计超像素
- WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码
- canvas像素画板
- OpenCV操作像素深入理解
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。