移动端适配之一：到底什么是像素

最近在做移动端的开发，深入了解了下移动端适配的一些问题，加上自己的理解，记录下来，写一个小的系列博客，与大家分享。所有的问题，就开始从像素说起吧~

像素是一个经常提到的概念，写CSS的人都经常会用到px作为单位。但是，在移动端，看着分辨率高达1125x2436的iPhone X，在控制台中却只有375x812的分辨率，似乎有点不合逻辑。这些问题，都将在下面找到答案。

一切都是点

经常用像素来描述分辨率，比如图片的分辨率、视频的分辨率、显示器的分辨率、手机的分辨率等。不论是那种分辨率，用像素作为单位，其实就是用点的个数作为单位，一个像素，就是一个点，或者说是一个很小的正方形。

屏幕中的分辨率

任何显示设备，如电脑显示器和手机屏幕，其实都是由很多个小点组成的。比如，我的显示器分辨率是1920x1080，就表示显示器横向一共有1920个像素点，纵向一共有1080个像素点，每个像素点都可以单独显示一种颜色。于是，所有像素点显示的颜色加起来，就是我们最后看到的效果。

至于每个像素点是多大，这就跟显示器硬件的性能有关了。需要注意的是，屏幕大小和分辨率的高低并无直接关系：

• 相同大小的屏幕，分辨率并不一定就相同
• 屏幕大的显示设备，分辨率并不一定就高，如iPhone X的分辨率高达2436×1125，就比我用的21英寸显示器的1920x1080的分辨率还要高

现在常常会提到4K显示器，就要求屏幕的横向分辨率达到约4000像素，如3840x2160或4096×2160。很明显，对于大小相同的屏幕，分辨率越高，像素点越多，每个像素点也就越小，成本也就越高。但是，分辨率高的最直观感受，就是可以看更高清的图片和视频，显示会更加清晰。

图片和视频中的像素

与上面类似，图片和视频中的分辨率，也是描述横向和纵向分辨有多少个像素点。每个像素点表示一种颜色，所有颜色显示出来，就是一张图片。理论上，可以用数字完全描述一张图片，如下面的例子：

#ddfd23, #234862 ..... #fab421
#ddfd23, #234862 ..... #fab421
......
#ddfd23, #234862 ..... #fab421
#ddfd23, #234862 ..... #fab421

每个像素点上的颜色，都用一个色值表示，如果图片分辨率为400x300像素，那么横向就有400个值，纵向是300个值。

物理像素与设备独立像素

对于一台显示器或手机，其实是有2个分辨率的，这两个分辨率是不同的，但也是相关的。

概念

上面所解释的屏幕中的分辨率，其实都是物理像素，也就是厂家在生产显示设备时就决定的实际点的个数。上面提到，对于不同的设备而言，物理像素点的大小是不一样的，这样就会带来问题：举个例子，21英寸显示器的分辨率是1440x1080，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端还是慎用。

缩放

说完上面的概念，也许会有个疑惑：有一张400x300的图片，分别放到400x300和800x600的显示器上全屏显示，会怎么样呢？

• 先来看400x300的显示器，由于是全屏显示，正好图片也是400x300的分辨率，两者相等，于是很愉快的，显示器上一个像素点就显示照片上的一个像素，整个图片完美的显示出来了
• 而在800x600的显示器上全屏时，图片上点的数目不够用了，这时，屏幕上的4个像素点只能显示照片的一个像素点（为什么是4呢，因为一个像素点可以看成是一个正方形，横向和纵向都是2倍，所以2x2=4）。由于像素已经是最小的单位了，不能再往下分了，所以就只能就近取色，所以最后的图片看起来就会模糊。

这个原理与Retina屏幕显示是一样的。比如，对于一幅400x300的图片，用CSS设定其宽高为400x300，CSS设定的是设备独立像素。在普通屏幕上，CSS指定的400x300像素大小区域正好是400x300个物理像素点，图片完美显示，对应上面的情况一；在Retina屏上，devicePixelRatio为2，CSS指定的400x300像素大小区域有800x600个物理像素点，对应的就是上面的情况2，所以就会有模糊的情况。具体原理可以参考下面的图（来自网络）：

为了解决Retina屏幕的显示问题，往往会用更高分辨率的图片来代替，比如对于上面的情况，如果用800x600的图片，那么在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

总结

这里花了很大的篇幅去介绍像素，这个看起来简单实际却有点复杂但又必须弄清楚的东西，为后面的移动端适配做基础。