移动端适配方案

相关概念

设备像素比

我们在 CSS 中使用的像素叫做 dips（device-independent pixels，设备独立像素）。这个像素点是虚拟的，你可以把它理解为一个座标系统中的点。而我们常说的分辨率是一个物理像素（physical pixels）。它是真实存在的，比如，iphone 6 的分辨率是 1334 * 750，就是说在这个 4.7 英寸的屏幕上有 1344* 750 个物理像素点。
设备像素比就是物理像素和设备独立像素的比例，可以用 window.devicePixelRatio 获取。公式表示为：window.devicePixelRatio = physical pixels / dips。我们可以根据设备像素比来决定当前设备应当采用何种适配方案。

相关问题以及如何适配

图片高清显示

理论上，1 个位图像素对应于 1 个物理像素时，图片才能得到完美清晰的展示，也就是说，在 window.devicePixelRatio = 1 的普通屏幕下位图展示是没有问题的。但是，当 window.devicePixelRatio ≠ 1 时，比如 iphone 6 的屏幕下，1 个位图像素对应 4 个物理像素，位图像素点不够，只能取近似值，从而导致图片模糊：

对于图片高清问题，比较好的方案就是使用 2x 图，即图片长宽设计为原先的 2 倍，然后将图片容器缩小50%（这里指的是屏幕像素比为 2 的情况，真实情况要根据屏幕像素比来决定倍数）。如此一来，位图像素个数就可以跟物理像素个数形成 1 : 1 的比例，图片就可以清晰显示了（这也解释了为什么 iphone 6 的 dips 是 375 * 667，但是视觉设计稿的画布大小要是 750 * 1334）。

一像素的实现

这个一像素指的是物理像素一像素，比如需要一个一像素的边框。以屏幕像素比等于 2 为例，border-width: 1px会占用 2 个物理像素，实现物理像素一像素得写 border-width: .5px。这里的问题在于，某些设备不支持 0.5 这样小数位的 CSS 像素。一个比较成熟的解决方案是伪元素 + transform 属性，如下：

.wrapper {
  position: relative;
  /* 一些其他样式... */
}
.wrapper::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ddd;
  transform: scaleY(.5);
}