吃透移动端 1px｜从基本原理到开源解决方案

前言

最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 1px，说 1px 不够准确，应该说成 1 物理像素。

通过阅读下面文章，你将会理解以下问题：

问题

• 为什么有 1px 这个问题？
• 实现 1px 有哪些方法？这些方法分别有哪些优缺点？
• 开源项目中使用的哪些解决方案？
• 如何在项目中处理 1px 的相关问题？

由来

基本概念

首先，我们要了解两个概念，一个是像素（pixel）可以简写为px，另外一个是设备像素比（DPR）

像素 ：指在由一个数字序列表示的图像中的一个最小单元，单位是 px，不可再次分割了。

设备像素比（DPR）: 设备像素比 = 设备像素 / 设备独立像素。

下面我来简单解释下几个概念

• CSS 像素 (虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位。px 是一个相对单位，相对的是设备像素。
• 设备像素 (物理像素)：指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关。
• 设备独立像素 (逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: CSS 像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。

也就是说，当逻辑像素是 1pt 时，在 DPR 为 2 的 设备上显示为 2px 的物理像素

参考数据

各种类型的 iphone 手机屏幕设备的参数

注：这里的缩放因子呢，就是 DRP 的值

设计稿对比数据

会有人好奇，为什么设计稿上显示是 750x1334 呢，这是因为设计稿是显示的物理像素

而我们 css 中的像素是逻辑像素应该为 375x 667，在编写代码时要将自定义宽度设置成 375px

那么此时设计稿上的 1px 宽度实际代表的 css 参数应该是 0.5px 对应物理像素 1px，那么怎么实现这个物理像素为 1px 呢

实践

归根结底有两种方案，一种是利用 css 中的transfrom：scaleY(0.5)，另一种是设置 媒体查询根据不同 DPR 缩放

解决方案一

原理

利用 css 的 伪元素::after + transfrom 进行缩放

为什么用伪元素？
因为伪元素::after或::before是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放

伪元素大多数浏览器默认单引号也可以使用，和伪类一样形式，而且单引号兼容性（ie）更好些

实现

<div class="cell border-1px"> cell