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

最近在作移动端的开发，深刻了解了下移动端适配的一些问题，加上本身的理解，记录下来，写一个小的系列博客，与你们分享。全部的问题，就开始从像素提及吧~

像素是一个常常提到的概念，写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能够这样调整分辨率：support.apple.com/kb/PH25175?…

在设备中查看

厂家在宣传本身的产品时，每每会拿物理像素说话，由于物理像素才会表明其工艺水平，才会吸引用户花更多的钱去买。对于物理像素，通常在产品的官网参数里面均可以看到，也能够在属性中查看。如对于个人Mac笔记本，在关于本机->显示器中能够看到以下的信息，其物理分辨率大小为2560 x 1600：

要查看显示器的设备独立像素，做为写前端的人，打开浏览器，再打开控制台，敲一下代码：

screen.width
screen.height
复制代码

对于个人Mac，获得的值为1440 x 900。对于手机，物理像素能够在手机说明书或者官网的参数配置中查到，而设备独立像素打开控制台选择对应机型后就能够看到：

固然，也能够在控制台中用上面的js命令查看。此外，这里也提供一个网站：material.io/tools/devic…

无论何种设备，通常都知足：设备独立像素 <= 物理像素

关系

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官方文档：www.w3.org/TR/css-valu…

相对长度单位

相对于预约义的长度或特征，通常是相对于字体或者viewport，在移动端适配中有很重要的做用

相对于字体

• ex (x-height)：等于所用字体的小写字母x的高度
• ch (character)：等于所用字体的数字0的宽度
• em：相对于最近父级font-size，因此会有层层嵌套的问题，每一层都是相对于最近父级
• rem ：相对于html标签的font-size

相对于viewport

• vh：viewport高度的1/100
• vw：viewport宽度的1/100
• vmin：viewport宽高较小者的1/100
• vmax：viewport宽高较大者的1/100

总结

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