移动端适配之一：什么是像素？大家分享。所有的问题，先从像素说起~像素是一个经常被提及的概念。写CSS的人经常使用px作为单位。不过在移动端，看着分辨率为1125x2436的iPhoneX，在控制台中却只有375x812，似乎有点不合逻辑。这些问题的答案将在下文中找到。一切都是一个点。像素常用来描述分辨率，比如图片、视频、显示器、手机的分辨率。不管分辨率如何，以像素为单位实际上就是以点数为单位。一个像素就是一个点，或者一个小方块。屏幕分辨率任何显示设备，例如电脑显示器和手机屏幕，实际上都是由许多小点组成的。比如我的显示器的分辨率是1920x1080，也就是说显示器横向共有1920个像素点，纵向共有1080个像素点，每个像素点可以独立显示一种颜色。因此，所有像素显示的颜色之和就是我们看到的最终效果。至于每个像素有多大，则与显示硬件的性能有关。需要注意的是，屏幕尺寸和分辨率之间并没有直接的关系：同样尺寸的屏幕不一定和大屏幕的显示设备的分辨率一样，分辨率也不一定一定要高。比如iPhoneX的分辨率高达2436×1125，比我使用的21寸显示器的1920x1080分辨率还要高。现在经常提到4K显示器，要求屏幕的水平分辨率达到4000像素左右，比如3840x2160或者4096×2160。显然，同样尺寸的屏幕，分辨率越高，像素越多，每个像素越小，成本也越高。不过高分辨率最直观的感受就是可以观看更高清晰度的图片和视频，显示效果也会更清晰。图片和视频中的像素与上述类似。图片和视频中的分辨率也描述了水平和垂直有多少像素。每个像素代表一种颜色，所有的颜色都显示出来，就是一幅图。理论上，一张图片完全可以用数字来描述，如下例：#ddfd23,#234862.....#fab421#ddfd23,#234862.....#fab421......#ddfd23,#234862.....#fab421#ddfd23,#234862.....#fab421每个像素上的颜色由颜色值表示。如果图像分辨率为400x300像素，则水平方向有400个值，垂直方向有300个值。物理像素和设备无关像素对于显示器或手机，实际上有两种分辨率。这两个决议不同，但也有关联。概念上面解释的屏幕中的分辨率，其实就是一个物理像素，也就是厂商在生产显示设备时所确定的实际点数。上文提到，对于不同的设备，物理像素的大小是不同的，这就会产生问题：比如21英寸显示器的分辨率是1440x1080，5.8英寸iPhoneX的分辨率是2436×1125，我用CSS画了一条线，它的长度是20px，如果以物理像素为度量单位，在显示器上看起来很正常，但是在iPhoneX屏幕上就变得很小了，这不是我们想要的结果。因此，为了解决这个问题，需要一种新的计量单位。该测量单位必须独立于设备。使用此单元，无论使用何种设备，相同长度的线看起来都应该相似。这就是设备独立像素（device-independentpixels，dips）。我们在CSS中使用的CSS像素实际上是一种与设备无关的像素。在Android或者IOS的开发中，人们不能称之为CSS像素，但意思还是一样的~物理像素可以理解为硬件设备，设备无关像素可以认为是程序员控制界面中间的操作系统会将设备的独立像素转换为物理像素，并使用实际的物理像素进行显示。因此，在编程中能够得到的像素都是与设备无关的像素。比如CSS中获取的所有像素都是设备无关像素，物理像素对程序员来说是透明的，我们在代码中是看不到的。.至于怎么看，下面会介绍。物理像素是出厂时确定的，但设备的独立像素实际上是可调的。当您使用计算机时，您应该尝试过调整分辨率。此时实际调整的是设备的独立像素。比如Macbook可以这样调节分辨率：https://support.apple.com/kb/...在设备中查看厂商在宣传产品的时候，经常会提到物理像素，因为物理像素代表了他们的技术水平，吸引用户花更多的钱购买。对于物理像素，一般可以在产品官网参数中看到，也可以在属性中查看。比如我的Mac笔记本，在AboutThisMachine->Display中可以看到如下信息，它的物理分辨率是2560x1600。要查看display的device-independentpixels，作为写前端的人，打开浏览器，然后打开控制台，输入代码：screen.widthscreen.height对于我的Mac，获取的值为1440x900。对于手机，物理像素可以在手机手册或参数中找到官网配置，打开控制台选择对应型号后即可看到设备的独立像素：当然也可以使用上面的js命令在控制台查看。另外，这里也提供了一个网站：https://material.io/tools/dev...，不过国内手机好像没有。具体型号可以百度搜索一下，基本都能找到。不管是什么设备，一般都满足：设备无关像素<=物理像素关系window.devicePixelRatio=设备物理像素/设备无关像素通过window.devicePixelRatio可以知道一个设备无关像素代表了多少个物理像素。比如在iPhoneX中，devicePixelRation为3，在iPhone6/7/8中，devicePixelRatio为2。当然devicePixelRation不一定是整数，也可能是1.5、2.25等小数值。经过我的实际测试，在手机模式下，上面的公式基本成立，但是在电脑显示器上，还是有些问题。另外，当我调整电脑显示器的分辨率时，无论电脑显示器调整的分辨率是多少，在我的MacBook上，devicePixelRation的值都是2（理论上调整电脑显示器的分辨率就是调整设备独立pixels，而物理像素是固定的，所以devicePixelRation的值也会随之变化（猜对了）。经查，这可能是不同平台对devicePixelRation的定义不同造成的，所以目前在移动端可以放心使用，在PC端慎用。缩放说完上面的概念，可能会有一个疑问：如果有一张400x300的图片，放到400x300和800x600的显示器上，全屏显示，会发生什么？我们先来看看400x300的显示器。由于是全屏显示，所以图片的分辨率也是400x300。两者是平等的，所以很愉快。显示屏上的一个像素显示照片上的一个像素，完美显示整个画面。全屏在800x600显示时，画面上的点数不够。这时屏幕上的4个像素点只能显示照片的一个像素点（为什么是4个，因为一个像素点可以看成是一个正方形在水平方向和垂直方向上被放大一倍，所以2x2=4）。由于像素已经是最小的单位，无法再进一步划分，所以我们只能选择最接近的颜色，所以最终的图片看起来会比较模糊。这个原理和Retina屏显示是一样的。比如一张400x300的图片，用CSS设置它的宽高为400x300，CSS设置设备无关像素。在普通屏幕上，CSS指定的400x300像素区域恰好是400x300物理像素，完美显示图片，对应上述情况1；在Retina屏幕上，devicePixelRatio为2，CSS指定的400x300像素区域有800x600物理像素对应上述情况2，所以会出现模糊。具体原理可以参考下图（来自网络）：为了解决Retina屏的显示问题，往往会使用更高分辨率的图片来代替。比如上面这种情况，如果使用800x600的图片，在Retina屏上显示会很完美，但是切换到普通屏时，问题又来了：显示器上的一个物理像素需要在照片上显示4个像素，无法容纳。这时候会自动降采样。降采样后，看起来问题不大，但可能会有一点色差或锐度不足。你可能在一些博客上看到过CSS的单位，一个像素的长度是1/96英寸。这种解释似乎对像素这个比较抽象的单位给人一种直观的感觉，但是现在，它只能用来描述CSS像素，不能用来描述物理像素，甚至用来描述物理像素，也不是那么准确。所以，在这里，有必要介绍一下CSS中的单位，顺便说明一下这个问题。CSS中有两种单位：绝对长度单位和相对长度单位。绝对长度单位cm:厘米mm:毫米in:英寸pc(picas):1/6pt(points)ofaninch:1/72px(pixels)ofaninch:1/96ofaninch之所以叫an绝对长度单位，是因为在只有普通屏幕的时代，同一个单位无论在什么样的设备上显示的长度都是一样的，1厘米就等于1厘米的物理长度。后来由于Retina显示器的出现，绝对长度单位中的“绝对”表示单位之间的关系是绝对固定的。例如，1in=72pt和1in=96px总是固定的。如果关系不变，则需要选择其中之一作为基准：在打印机设备中，一般以物理单位作为基准，即1in对应物理单位中的1in。此时1px的长度就是1/96in。所有单位都对应于物理长度。在显示设备（电脑、手机）中，一般以像素为基准。例如在iPhoneX中，设备的宽度为2.79in（物理宽度），屏幕分辨率为1125个物理像素，window.devicePixelRatio=3，即3个物理像素代表一个CSS像素，所以CSS像素的iPhoneX宽度为375px。此时CSS单位中1in所代表的实际长度为2.79/375*96in=0.71424in。此时CSS中的1in并不代表物理长度。之所以1in的绝对长度不再是绝对的，是因为倍数的出现，让像素的物理尺寸变小了。因此，CSS也修改了这些单位的定义，目前大多数设备都支持这些单位。关于这一点，可以参看CSS官方文档：https://www.w3.org/TR/css-val...相对长度单位是相对于预定义的长度或特征，一般是相对于字体或视口，移动时相对于字体ex(x-height)：等于所用字体的小写字母x的高度ch(character)：等于所用字体的数字0的宽度em：相对于nearestparentfont-size，所以会存在逐层嵌套的问题，每一层都是相对于最近的parentrem:relativetothefont-sizeofthehtmltagrelativetoviewportvh:1/100oftheviewportheightvw：视口的1/100widthvmin：宽高较小视口的1/100vmax：宽高较大视口的1/100以下移动端适配将作为基础。
