共计 4403 个字符，预计需要花费 12 分钟才能阅读完成。
最近在做移动端的开发，深入了解了下移动端适配的一些问题，加上自己的理解，记录下来，写一个小的系列博客，与大家分享。所有的问题，就开始从像素说起吧~
像素是一个经常提到的概念，写 CSS 的人都经常会用到 px 作为单位。但是，在移动端，看着分辨率高达 1125×2436 的 iPhone X，在控制台中却只有 375×812 的分辨率，似乎有点不合逻辑。这些问题，都将在下面找到答案。
一切都是点
经常用像素来描述分辨率，比如图片的分辨率、视频的分辨率、显示器的分辨率、手机的分辨率等。不论是那种分辨率，用像素作为单位，其实就是用点的个数作为单位，一个像素，就是一个点，或者说是一个很小的正方形。
屏幕中的分辨率
任何显示设备，如电脑显示器和手机屏幕，其实都是由很多个小点组成的。比如，我的显示器分辨率是 1920×1080，就表示显示器横向一共有 1920 个像素点，纵向一共有 1080 个像素点，每个像素点都可以单独显示一种颜色。于是，所有像素点显示的颜色加起来，就是我们最后看到的效果。
至于每个像素点是多大，这就跟显示器硬件的性能有关了。需要注意的是，屏幕大小和分辨率的高低并无直接关系：
相同大小的屏幕，分辨率并不一定就相同
屏幕大的显示设备，分辨率并不一定就高，如 iPhone X 的分辨率高达 2436×1125，就比我用的 21 英寸显示器的 1920×1080 的分辨率还要高
现在常常会提到 4K 显示器，就要求屏幕的横向分辨率达到约 4000 像素，如 3840×2160 或 4096×2160。很明显，对于大小相同的屏幕，分辨率越高，像素点越多，每个像素点也就越小，成本也就越高。但是，分辨率高的最直观感受，就是可以看更高清的图片和视频，显示会更加清晰。
图片和视频中的像素
与上面类似，图片和视频中的分辨率，也是描述横向和纵向分辨有多少个像素点。每个像素点表示一种颜色，所有颜色显示出来，就是一张图片。理论上，可以用数字完全描述一张图片，如下面的例子：
#ddfd23, #234862 ….. #fab421
#ddfd23, #234862 ….. #fab421
……
#ddfd23, #234862 ….. #fab421
#ddfd23, #234862 ….. #fab421
每个像素点上的颜色，都用一个色值表示，如果图片分辨率为 400×300 像素，那么横向就有 400 个值，纵向是 300 个值。
物理像素与设备独立像素
对于一台显示器或手机，其实是有 2 个分辨率的，这两个分辨率是不同的，但也是相关的。
概念
上面所解释的屏幕中的分辨率，其实都是物理像素，也就是厂家在生产显示设备时就决定的实际点的个数。上面提到，对于不同的设备而言，物理像素点的大小是不一样的，这样就会带来问题：举个例子，21 英寸显示器的分辨率是 1440×1080，5.8 英寸的 iPhone X 的分辨率是 2436×1125，我用 CSS 画一条线，其长度是 20px，如果都以物理像素作为度量单位，那么在显示器上看起来正常，在 iPhone X 屏幕上就变得非常小，不是我们想要的结果。所以呢，为了解决这个问题，还需要一个新的度量单位，这个度量单位必须是与设备无关的，采用这个单位，无论在何种设备上，相同长度的线看起来都应该差不多，这就是设备独立像素 (device-independent pixels, dips)。我们在 CSS 中用的 CSS 像素，其实就是一种设备独立像素，在 Android 或 IOS 开发中，人家就不能叫 CSS 像素了，不过意思还是一样滴~
物理像素可以理解为硬件设备，设备独立像素可以认为是程序员控制显示器的接口，中间会经过操作系统来将设备独立像素转换成物理像素，用实际的物理像素点来显示。所以，在编程中能获取到的都是设备独立像素，如 CSS 中的获取的所有像素都是设备独立像素，而物理像素对于程序员来说是透明的，咱没法在代码中看到的。至于怎么看，将在下文介绍。
物理像素是在出厂时就决定的，但是设备独立像素其实是可调的。大家用电脑的时候，应该都试过调整分辨率，此时调整的实际就是设备独立像素，比如 Macbook 可以这样调整分辨率：https://support.apple.com/kb/…
在设备中查看
厂家在宣传自己的产品时，往往会拿物理像素说话，因为物理像素才会代表其工艺水平，才会吸引用户花更多的钱去买。对于物理像素，一般在产品的官网参数里面都可以看到，也可以在属性中查看。如对于我的 Mac 笔记本，在关于本机 -> 显示器中可以看到如下的信息，其物理分辨率大小为 2560 x 1600。
要查看显示器的设备独立像素，作为写前端的人，打开浏览器，再打开控制台，敲一下代码：
screen.width
screen.height
对于我的 Mac，得到的值为 1440 x 900。对于手机，物理像素可以在手机说明书或者官网的参数配置中查到，而设备独立像素打开控制台选择对应机型后就可以看到：
当然，也可以在控制台中用上面的 js 命令查看。此外，这里也提供一个网站：https://material.io/tools/dev…，但是貌似国内手机没收录，具体的机型，大家可以自行百度下，基本都可以查到的。
不管何种设备，一般都满足：设备独立像素 <= 物理像素
关系
window.devicePixelRatio = 设备物理像素 / 设备独立像素
通过 window.devicePixelRatio，可以知道一个设备独立像素用几个物理像素点来表示。如 iPhone X 中，devicePixelRation 为 3，iPhone6/7/ 8 中 devicePixelRatio 的为 2。当然，devicePixelRation 并不一定是整数，也有可能是 1.5，2.25 这些小数值。
经过我的实际测试，在手机模式下，上面这个公式基本都是成立的，而在电脑显示器上，还有些问题。另外，当我调整电脑显示器的分辨率时，无论调整出来的电脑显示器分辨率为多少，在我的 MacBook 上，devicePixelRation 的值都为 2（理论上，调整电脑显示器的分辨率，即调整了设备独立像素，而物理像素是固定的，所以 devicePixelRation 的值会跟着改变猜对）。经查，这可能是 devicePixelRation 在不同平台的定义不同造成的，所以目前，在移动端可以放心的用，在 PC 端还是慎用。
缩放
说完上面的概念，也许会有个疑惑：有一张 400×300 的图片，分别放到 400×300 和 800×600 的显示器上全屏显示，会怎么样呢？
先来看 400×300 的显示器，由于是全屏显示，正好图片也是 400×300 的分辨率，两者相等，于是很愉快的，显示器上一个像素点就显示照片上的一个像素，整个图片完美的显示出来了
而在 800×600 的显示器上全屏时，图片上点的数目不够用了，这时，屏幕上的 4 个像素点只能显示照片的一个像素点（为什么是 4 呢，因为一个像素点可以看成是一个正方形，横向和纵向都是 2 倍，所以 2 ×2=4）。由于像素已经是最小的单位了，不能再往下分了，所以就只能就近取色，所以最后的图片看起来就会模糊。
这个原理与 Retina 屏幕显示是一样的。比如，对于一幅 400×300 的图片，用 CSS 设定其宽高为 400×300，CSS 设定的是设备独立像素。在普通屏幕上，CSS 指定的 400×300 像素大小区域正好是 400×300 个物理像素点，图片完美显示，对应上面的情况一；在 Retina 屏上，devicePixelRatio 为 2，CSS 指定的 400×300 像素大小区域有 800×600 个物理像素点，对应的就是上面的情况 2，所以就会有模糊的情况。具体原理可以参考下面的图（来自网络）：
为了解决 Retina 屏幕的显示问题，往往会用更高分辨率的图片来代替，比如对于上面的情况，如果用 800×600 的图片，那么在 Retina 屏幕上显示就会非常完美，但是换到普通屏幕上，问题又来了：显示器上的一个物理像素点要显示照片上的 4 个像素点，装不下了。这时候，会自动下采样。下采样之后的，看起来也不会有太大问题，但可能会有点色差或者缺少锐利度。
CSS 的单位
你可能在有的博客上看到，一个像素的长度是一英寸的 1 /96。这种解释，貌似给了像素这个比较抽象的单位一个直观的感受，但是现在来看，这个只能用来描述 CSS 像素，不能用来描述物理像素，而且，即使是描述物理像素，也不那么准确了。所以，在这里，有必要介绍一下 CSS 中的单位，顺便解释一下这个问题。
CSS 的单位分两种：绝对长度单位和相对长度单位。
绝对长度单位
cm：厘米
mm：毫米
in：英寸
pc(picas): 一英寸的 1 /6
pt(points)：一英寸的 1 /72
px(pixels)：一英寸的 1 /96
之所以叫绝对长度单位，是因为在只有普通屏幕的时代，相同的单位无论在何种设备上，显示出来的长度都是一致的，并且 1cm 就是等于物理长度 1 厘米。而后来，由于 Retina 显示屏的出现，绝对长度单位里面的“绝对”，是指单位之间关系是绝对固定的。比如，1in = 72pt 和 1in = 96px 是永远固定不变的。关系不变，就需要选取其中一个作为基准：
在打印机设备中，一般是以物理单位作为基准，即 1in 对应物理单位的 1in，此时，1px 的长度就是 1 /96in。所有单位都是与物理长度对应的
而在显示设备（电脑和手机）中，一般是以像素作为基准的。比如在 iPhone X 中，设备的宽度是 2.79in（物理宽度），屏幕分辨率是 1125 物理像素，window.devicePixelRatio = 3，也就是 3 个物理像素表示一个 CSS 像素，所以 iPhone X 宽度的 CSS 像素是 375px。此时，CSS 单位的 1in 表示的实际长度是 2.79 / 375 * 96in = 0.71424in，此时，CSS 的 1in 并不表示物理长度 1in
之所以这种绝对长度不再绝对，就是因为多倍屛的出现，使得像素点的物理尺寸缩小。于是，CSS 也修改了这些单位的定义，目前已经得到大多数设备的支持。关于这一点，可以参加 CSS 官方文档：https://www.w3.org/TR/css-val…
相对长度单位
相对于预定义的长度或特征，一般是相对于字体或者 viewport，在移动端适配中有很重要的作用
相对于字体
ex (x-height)：等于所用字体的小写字母 x 的高度
ch (character)：等于所用字体的数字 0 的高度
em：相对于最近父级 font-size，所以会有层层嵌套的问题，每一层都是相对于最近父级
rem：相对于 html 标签的 font-size
相对于 viewport
vh：viewport 高度的 1 /10
vw：viewport 宽度的 1 /10
vmin：viewport 宽高较小者的 1 /10
vmax：viewport 宽高较大者的 1 /10
总结
这里花了很大的篇幅去介绍像素，这个看起来简单实际却有点复杂但又必须弄清楚的东西，为后面的移动端适配做基础。
