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

一直不太清楚CSS中的1px与逻辑像素、物理像素是个什么关系（作为一名前端感觉很惭愧 -_-！），今天终于花时间彻底弄清楚了，其实弄清楚之后就觉得事情很简单，但也只有在弄清楚之后，才会觉得简单（语出《禅与摩托车维修艺术》，哈哈哈哈）。

两种像素

物理像素：设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。

逻辑像素：也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。

设备像素比（Device Pixel Ratio, DPR）：一个设备的宽或高方向上，物理像素与逻辑像素之比，即：

DPR = width_物理 / width_逻辑 = height_物理 / height_逻辑

像素还分物理和逻辑？这两个玩意有啥区别？

其实在很久以前，的确是没区别的，CSS里写个1px，屏幕就给你渲染成1个实际的像素点，DPR=1，多么简单自然~

但是后来事情起了变化，搞事的就是Retina技术，这种技术使用4个乃至更多物理像素来渲染1个逻辑像素，这样一来，同样的CSS代码设置的尺寸，在Retina和非Retina屏幕上看起来大小是一样的，但在Retina屏幕上要精细得多。下图是乔帮主在介绍Retina技术。

在Retina屏上，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的“物理像素”，包括UE小姐姐们出图也是以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);
        }
    }
}

上面介绍的是只有一边的情景，如果是四面都要有框，咋办？

我一般的做法是，画个2倍大小的矩形框，再scale(0.5)，这样基本上就可以通过视觉验收了。

 

后记：为了开发一个比较视觉稿和实现截屏的小工具，深入研究以后发现像素这块比预想的要复杂一些，但也因此彻底搞懂了相关知识，写出了这篇博客，也算是小有收获。