1. 背景介绍

对于 pc 端适配的问题（除开布局方式），在不改变电脑分辨率，和缩放网页状态下。通常只需要设置中设置 viewport 即可。但是放在手机上时候就不一样了，你需要了解 px,dips,ppi 等等有关知识，才能应付移动端各种适配问题以及坑，光是 Android 各种花式分辨率和 dpr 就让人头疼，还有 iphone 的视网膜（Retina）屏幕上，也够喝一壶。

2. 知识剖析

先来讲讲 px

英文为 pixel (像素), 它是图像显示基本单元。分辨率是指在长和宽的两个方向上各拥有的像素个数。一个像素有多大呢？主要取决于显示器的分辨率，相同面积不同分辨率的显示屏，其像素点大小就不相同。其实这里就是物理像素，又叫设备像素。英文名（devicepixels, 简称 dp）最好记住英语简称，不然混在一起脑子被搅成浆糊，还有它的单位是 pt。这些有限的点就叫做像素，每一个长度方向上的像素个数乖每一个宽度方向上的像素个数的形式表示，就叫做图片的分辨率。

再来谈谈 ppi（pixels per inch）

ppi: 每英寸多少像素数，放到显示器上说的每英寸多少物理像素及显示器设备的点距。

这里要知道 1 英寸（in）=（约等于）2.54cm (厘米)=25.4mm (毫米), 以及为什么 px 不是绝对尺寸。

除了 ppi 以外还有 dpi (每英寸上的点数)，该数值可以粗略度量计算机显示器或手机屏幕等显示输出设备

css px

内 CSS 像素是 Web 编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的

还有一个设备独立像素，也叫做逻辑像素，也叫做与设备无关像素，也叫做与密度无关系像素。英文简称（dips）

设备独立像素” 也有人称为 “CSS 像素”，一种形象的说法，更倾向于表明与 CSS 中尺寸的对应。前面这句话是错的但是容易理解。正确的解释是：可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素 (比如：CSS 像素，只是在 android 机中 CSS 像素就不叫”CSS 像素” 了而是叫” 设备独立像素”)，然后由相关系统转换为物理像素。有点绕这个问题先放放

论 css 像素与设备像素之间的关系

这两个之间的关系是成比例的。这里就要牵扯到另外一个名词：设备像素比（英文名 dpr）。设备像素比 = 设备像素 / 设备独立

像素。可以通过 JavaScript 中的 window.devicePixelRatio 来获取设备中的像素比值。

3. 常见问题

1. 移动端的尺寸，主要是间距，宽高，字体，和图像的尺寸。由于移动设备千差万别，如何才能保证效果呢？

2.retina 屏幕下，图片模糊的情况。

3.retina 下，border: 1px 问题

4. 解决方案

对于问题 1 要注意的的有三点

1. html 头部 meat 标签中的 DPR

2.retina 屏幕下，图片模糊的情况。

3.retina 下，border: 1px 问题

可以利用 rem 特性做动态修改根元素 font-size，另外就是媒体查询了。

对于问题 2

对于图片高清问题，比较好的方案就是两倍图片 (@2x)。

如：200×300 (css pixel) img 标签，就需要提供 400×600 的图片。
如此一来，位图像素点个数就是原来的 4 倍，在 retina 屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1 的比例，图片自然就清晰了 (这也解释了之前留下的一个问题，为啥视觉稿的画布大小要 ×2？)。

对于问题 3

对于 iphone5 (dpr=2)，添加如下的 meta 标签，设置 viewport (scale 0.5)

这样，页面中的所有的 border: 1px 都将缩小 0.5，从而达到 border: 0.5px; 的效果。然而，页 scale，必然会带来一些问题：字体大小会被缩放页面布局会被缩放 (如: div 的宽高等)