px 与像素是如何换算的

科普前端尺寸系列，推荐按顺序阅读

px 是所有开发者接触 css 时所了解的第一个单位，也是开发过程中最常见的单位。 如果你还不清楚 px、逻辑像素、物理像素之间是怎样换算的，本文将从头到尾帮你梳理一遍

像素，为影像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“画像元素”之意，有时亦被称为pel（picture element）。每个这样的消息元素不是一个点或者一个方块，而是一个抽象的取样。仔细处理的话，一幅影像中的像素可以在任何尺度上看起来都不像分离的点或者方块；但是在很多情况下，它们采用点或者方块显示。每个像素可有各自的颜色值，可采三原色显示，因而又分成红、绿、蓝三种子像素（RGB色域），或者青、品红、黄和黑（CMYK色域，印刷行业以及打印机中常见）。照片是一个个取样点的集合，在影像没有经过不正确的/有损的压缩或相机镜头合适的前提下，单位面积内的像素越多代表分辨率越高，所显示的影像就会接近于真实物体。 ——Wikipedia

简单来说，像素是一个「相对单位」，不同于厘米这种任意物品都通用的尺寸。像素根据展示媒介的不同而大小不同。

拿自己手上的 MacBook Pro 举例，屏幕参数是 2880 x 1800，也就意味着如果你拿放大镜把屏幕放大再放大，可以看到有 2880 x 1800 个像素点整齐排列着

所以 css 里的 1px 就等于屏幕上的 1 像素点吧，太简单了。随便验证一下

下面的滚动告诉你，2880 个像素根本放不下 2880px 的元素。难道苹果虚假宣传？当然不可能，这里需要知道两个概念

苹果标明的 2880 x 1800 是屏幕的物理分辨率，表示屏幕上整齐排列着 5,184,000 个货真价实的物理像素

仔细回想一下，你记得电脑好像可以设置分辨率。打开系统偏好设置->显示器->分辨率

左边显示的「大约 1920 x 1200 」，这就是系统当前的逻辑分辨率，也说明水平垂直方向上分别包含了 1920、1200 个逻辑像素。总共 230,400

再次验证

这次无论怎么滑，浏览器都纹丝不动。width: 1920px = 逻辑分辨率宽 1920 证实了 css 中的 1px 完全等于 1 逻辑像素。

而且通常情况下，系统、软件、前端页面的设计都是按逻辑像素绘制。所以逻辑分辨率越大，所包含的逻辑像素越多、展示的内容越多

移动端设备是否表现相同呢？使用安安兔查看手中 iPhone6s 的分辨率：1334 x 750，手机可从来没听说过可以设置分辨率，这次应该稳了

明显短了一大截，这是怎么回事？还好我们有了电脑端经验，首先可以确定 iPhone6s 的物理分辨率为1337 x 750，宽度为 750 个物理像素

而逻辑分辨率宽度可以等价于浏览器宽度，刚好又有一个 js 方法能输出浏览器宽度 ： alert(document.documentElement.clientWidth)，加上这句代码得出结果 980，验证一下。

严丝合缝！逻辑分辨率宽为 980，包含了 980 个逻辑像素 在电脑端，物理像素比逻辑像素多，移动端则相反，充分说明：逻辑像素的多少不受限于物理像素

像素可以抽象成一个小格子，如果以最开始 MacBook Pro 的 2880 x 1800 物理像素为准，1px 的线条应该刚好高度是 1 个格子

但是逻辑像素是 1920 的情况下，2880 / 1920 = 1.5 说明当前设置下，一个逻辑像素等于 1.5 个物理像素的大小。1px 的线条高度需要 1.5 个格子。

移动端相反，750 / 980 ≈ 0.77 一个逻辑像素等于 0.77 个物理像素，约 0.8 个格子

实际上物理像素已经是最小单位，无法再分割。所以不能取整的格子，将会根据设备各自的逻辑，多显示或少显示。这也是造成某些情况下，页面不显示细线、线条展示过粗的根本原因。

参考： 移动端尺寸基础知识