1px 边框问题的由来

苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。

像这种像素比（像素比（即dpr）＝ 物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。

而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

使用 transform 解决

通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

复制
1.one-pixel-border {
2  position: relative;
3  box-sizing: border-box;
4}
5
6.one-pixel-border::before {
7  display: block;
8  content: "";
9  position: absolute;
10  top: 50%;
11  left: 50%;
12  width: 200%;
13  height: 200%;
14  border: 1px solid red;
15  transform: translate(-50%, -50%) scale(0.5, 0.5);
16}

这样就可以得到 0.5px 的边框。

还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

复制
1@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
2  ...
3}
4
5@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
6  ...
7}

当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。