掌握web开发基础系列--物理像素、逻辑像素、css像素

时间 2019-11-06

标签掌握 web 开发基础系列物理像素逻辑 css 栏目 HTML 繁體版

原文原文链接

思考一下

什么是物理像素？什么是css像素？css

在《掌握web开发基础系列--长度单位》这篇文章中已经介绍过了css像素单位--px，这篇文章详细探讨一下设备物理像素和css像素之间的关系。html

“像素”，是一个名词，在不一样的上下文中所描述的东西可能不同，可是也可能存在必定关系。前端

两种像素

注：下面不少是直接引用参考文章中的描述，主要缘由是原文写的很棒，为做者点赞！程序员

物理像素

设备屏幕实际拥有的像素点，屏幕的基本单元，是有实体的。好比iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，全部iPhone 6 总共有750*1334个像素点。web

屏幕广泛采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业广泛使用CMYK色域(青、品红、黄和黑)。面试

逻辑像素

也叫“设备独立像素”（Device Independent Pixel，DIP），能够理解为反映在CSS/JS程序里面的像素点，也就是说css像素是逻辑像素的一种。浏览器

除了css像素是逻辑像素还有其余常见的逻辑像素吗？post

咱们平时描述一张图片宽高时通常用 200px * 100px，这里的px也是逻辑像素。ui

设备像素比（Device Pixel Ratio，DPR）

一个设备的物理像素与逻辑像素之比。spa

像素为何会有“物理”和“逻辑”之分，它们之间什么区别？

其实在好久之前，的确是没区别的，CSS里写个1px，屏幕就给你渲染成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一下，完事~

再次感谢原文做者！

总结

1个逻辑像素等于1个物理像素仍是等于多个物理像素是由设备自己决定的，咱们能够经过DPR也就是window.devicePixelRatio获知，至于设备怎么作的控制和转换咱们不去作深究。

参考文章

CSS中的px与物理像素、逻辑像素、1px边框问题