移動端適配方案

相關概念

設備像素比

我們在 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);
}