---

前言

在移动端有一个概念叫做多倍图，这时我就产生了一个问题，为什么要使用多倍图呢？ pc端开发页面时1px就是一个像素，而到了移动端开发为什么1px就对应多个像素了呢？

---

首先需要了解一些前提概念

一、前提概念

1.分辨率与物理尺寸关系

目前绝大部分显示器都是基于点阵的

通过一系列的小点排成一个大矩形，每个小点显示不同的颜色来形成图像，我们把每个小点称为一个像素 (pixel)。

对于一块具体的显示器，在一个具体的设置下，总像素的个数是固定的，可以具体数出来，我们把显示器有多少行多少列像素叫做显示器的“分辨率 (geometry)”，表示方法是“宽度像素个数x高度像素个数”

同样的分辨率下，每个小点的尺寸仍然是可以大可以小的

同样是 900 个点，如果每个点 1 毫米，那就是 90 厘米，如果每个点 1 厘米，那就是 9 米

对于一台具体的显示器，那么多个点排列起来之后，构成的一个整体的宽度和高度，我们称之为显示器的“物理尺寸 (physical size)”，单位是“宽度x高度”

DPI（点每英寸）

不同的显示器分辨率不一样，物理尺寸也不一样，因此你用一张一英寸长的小纸条按在屏幕上，能被你盖住的像素的个数也是不一样的

我们把一英寸里能包含的像素的个数叫做屏幕的解析度，单位叫 DPI（dots per inch）

PPI（像素每英寸）

每英寸的像素数（PPI，pixel per inch）

屏幕常用 PPI(Pixel per inch) 来判定屏幕清晰度，ppi越高，每英寸像素点越多，图像越清晰；我们可以类比物体的密度，密度越大，单位体积的质量就越大，ppi越高，单位面积的像素越多

转换关系

物理长度转换成像素个数时，根据屏幕的解析度（DPI（点每英寸））计算每英寸对应多少个像素点，然后根据像素点显示物理长度

例如：在屏幕上显示一条 5cm 长的线段

5cm 是物理长度，要想在屏幕上显示，需要先把物理长度换算成像素个数。

5cm 换成英寸是 1.9685 英寸，然后根据屏幕的解析度，每英寸对应 120 个像素，因此 5cm 对应的就是 236 个像素。

所以在这台显示器上画一条 236 个像素的线段，它就正好是 5cm 了

扩展显示识别数据 EDID（extended display identification data）

显示器的制造者通常会运用EDID 技术将物理尺寸信息直接存在显示器里面，计算机可以根据屏幕分辨率和显示器的物理尺寸计算出一个合适的解析度

EDID 技术是新兴技术，以前的显示器并没有这项技术，所以会根据市面上常见的显示器的解析度来，硬性规定一个默认值

在 Windows 下，默认的解析度是 96dpi

2.物理像素 DP(device pixels)

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt

物理像素是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成

所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（2*2）

3.物理像素比（DPR）

这里先叙述一下概念，后面再详细简介

物理像素点是指屏幕显示的最小颗粒，是真实存在的，如手机屏幕分辨率750*1334是指横向有750个像素点纵向有1334个像素点

在开发时使用的px单位称为逻辑像素（CSS像素），逻辑像素与之间存在一个比例关系，默认情况下一个px和一个像素一一对应，是相同的

可以用 javascript 中的window.devicePixelRatio 来获取物理像素比，也可以用媒体查询的 -webkit-min-device-pixel-ratio 来获取，比例多少与设备相关

在PC端1px等于一个物理像素，但是移动端就不尽相同，移动设备都是高PPI设备，一个px往往可以相当于多个物理像素的尺寸

一个px能显示的物理像素点个数，称为物理像素比或屏幕像素比

4.视口（viewport）

视口就是浏览器显示页面内容的屏幕区域。

视口可以分为布局视口和理想视口还有设备视觉视口

布局视口（layout　viewport）

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS、Android基本都将这个默认设备视觉视口设置为980px，所以PC上的网页大多能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

设备视觉视口（visual　viewport）

视觉视口是指用户可以通过设备看到的网页区域

可以人为的通过缩放设备去操作视觉视口，但不会影响布局，布局视口仍保持原来宽度

理想视口（ideal　viewport）

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口对设备而言，就是最理想的视口尺寸

需要添加，mate标签通知浏览器操作

meta视口标签主要目的：布局视口应该和理想视口宽度一致，简单理解就是，设备有多宽，布局视口就多宽

5.meat标签

width属性设置的是视口宽度，可以设置为device－width（设备视口宽度）

user-scalable设置是否可以缩放（不可以的话用户无法放大界面）

initial-scale初始缩放比，初始的时候对布局视口进行缩放的比例

二、物理像素＆物理像素比

1.概念

物理像素点是指屏幕显示的最小颗粒，是真实存在的，如手机屏幕分辨率750*1334是指横向有750个像素点纵向有1334个像素点

在开发时使用的px单位称为逻辑像素（CSS像素），逻辑像素与之间存在一个比例关系，默认情况下一个px和一个像素一一对应，是相同的

可以用 javascript 中的 window.devicePixelRatio 来获取物理像素比，也可以用媒体查询的-webkit-min-device-pixel-ratio 来获取，比例多少与设备相关

在pc端1px等于一个物理像素，但是移动端就不尽相同

一个px能显示的物理像素点个数，称为物理像素比或屏幕像素比

2.物理像素比产生原因

PC端和手机屏幕在早期1CSS像素＝1物理像素

retina（视网膜技术）是一种显示技术，可以把更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率，提高屏幕显示的细腻程度（就是将1像素的范围里放置更多的物理像素点，使用更多的物理像素点表示1px）

扩展显示识别数据 EDID（extended display identification data）

显示器的制造者通常会运用EDID 技术将物理尺寸信息直接存在显示器里面，计算机可以根据屏幕分辨率和显示器的物理尺寸计算出一个合适的解析度

EDID 技术是新兴技术，以前的显示器并没有这项技术，所以会根据市面上常见的显示器的解析度来，硬性规定一个默认值(在 Windows 下，默认的解析度是 96dpi)

由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致，因此，CSS像素为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，一般来说，每英寸的像素的数量保持在 96 左右

三、图片模糊问题

由于物理像素比的原因，对于色彩丰富的图片，在手机端打开，按照屏幕像素比发达倍数，会造成图片模糊

一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元，每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。

理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。

而对于dpr=2的Retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，导致图片看起来比较模糊，如下图

四、多倍图

在标准viewport设置中，使用多倍图提高图片质量，解决高清设备中的模糊问题

如果pc端需要一个5050的图片，通常准备像素为100100的图片，再手动将图片缩小到50*50，实际准备的图片是实际需要的两倍，这就是两倍图

原理

一个200×300(CSS pixel)的img标签，对于dpr=2的屏幕，用400×600的图片，如此一来，位图像素点个数就是原来的4倍，在Retina屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了

通常使用的都为二倍图，但也存在更高的物理像素比所以也有三倍图、四倍图的情况

普通屏幕下使用多倍图

普通屏幕下，200×300(CSS pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数是200×300×4个，所以就出现一个物理像素点对应4个位图像素点

但它的取色也只能通过一定的算法取某一个位图像素点上的色值，这个过程叫做缩减像素采样(downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差，如下图

所以最好的解决办法是：不同的dpr下，加载不同的尺寸的图片。不管是通过CSS媒体查询，还是通过JS条件判断都是可以的

五、移动端1px边框问题

产生原因

移动端由于高像素密度，设置CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px，而设计师想要的1px宽的直线，其实是指1物理像素宽

所以对于二倍屏应该设置border: 0.5px，然而，并不是所有手机浏览器都能识别小数，不同浏览器有不同的处理方式

有的只渲染出零点几px对应的物理像素，有的干脆都显示1px，甚至还有0.5px会被当成为0px处理

同样的rem值，在不同dpr（物理像素比）的设备上宽度不同，最常见的就是边框，有的设备上显得特宽，特别扭，也就是经典的1px边框问题

解决方法

1.使用border-image实现

根据需求选择图片，然后根据css的border-image属性设置边框图片

语法：

// 用在边框的图片的路径
border-image: none | <image>
// 图片边框内偏移
bordre-image-slice [<number> | <percentage>]{1,4} && fill?
// 图片边框的宽度
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
// 边框图像区域超出边框的量（向外位移）
border-image-outset:[<number> | <percentage>]{1,4}
// 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-image-repeat：repeated|rounded|stretched

2.使用background-image实现

linear-gradient：指定线性渐变，接受大于等于3个参数，第一个为渐变旋转角度，第二个开始为渐变的颜色和到哪个位置（百分比）全部变为该颜色

将原本1个物理像素的边框大小利用线性渐变分割成几个部分（百分比控制），实现小于1像素效果

例如：

该例子中，第一句就是，渐变方向旋转180度，即从上往下（默认为0度从下往上），从红色开始渐变，到50%的位置还是红色，再渐变为继承父元素颜色。

缺点：因为每个边框都是线性渐变颜色实现，因此无法实现圆角

3.使用box-shadow模拟边框

优点：没有圆角问题
缺点：边框有阴影，颜色变浅

4.伪元素+transform

针对二倍屏构建1个伪元素， border为1px, 再以transform缩放到50%：scaleY(0.5)

5.媒体查询利用设备像素比缩放，设置小数像素

IOS8+下已经支持带小数的px值，media query 对应 物理像素比（devicePixelRatio） 有个查询值 -webkit-min-device-pixel-ratio；

6.用JS计算rem基准值和viewport缩放值

用JS根据屏幕尺寸和dpr精确地设置不同屏幕所应有的rem基准值和meta标签的initial-scale缩放值属性