css 中的 1px 並不等於裝置的 1px

在 css 中我們一般使用 px 作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的一個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是一個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動裝置上，必須弄明白這點。在早先的移動裝置中，螢幕畫素密度都比較低，如iphone3，它的解析度為320x480，在iphone3上，一個css畫素確實是等於一個螢幕物理畫素的。後來隨著技術的發展，移動裝置的螢幕畫素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，解析度提高了一倍，變成640x960，但螢幕尺寸卻沒變化，這就意味著同樣大小的螢幕上，畫素卻多了一倍，這時，一個css畫素是等於兩個物理畫素的。其他品牌的移動裝置也是這個道理。例如安卓裝置根據螢幕畫素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，解析度也是五花八門，安卓裝置上的一個css畫素相當於多少個螢幕物理畫素，也因裝置的不同而不同，沒有一個定論。

還有一個因素也會引起css中px的變化，那就是使用者縮放。例如，當用戶把頁面放大一倍，那麼css中1px所代表的物理畫素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理畫素也會減少一倍。關於這點，在文章後面的部分還會講到。

在移動端瀏覽器中以及某些桌面瀏覽器中，window物件有一個devicePixelRatio屬性，它的官方的定義為：裝置物理畫素和裝置獨立畫素的比例，也就是 devicePixelRatio = 物理畫素 / 獨立畫素。css中的px就可以看做是裝置的獨立畫素，所以通過devicePixelRatio，我們可以知道該裝置上一個css畫素代表多少個物理畫素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css畫素相當於2個物理畫素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的相容性問題，所以我們現在還並不能完全信賴這個東西，具體的情況可以看下

ok，現在很明確了，你寫的1px，在移動端顯示的可能是2個物理畫素甚至3個物理畫素。

移動端1px如何實現

網上能搜到很多實現方案，這裡我只推薦一種，最常用的，實用的。

偽類 + transform 實現：
原理是把原先元素的 border 去掉，然後利用 :before 或者 :after 重做 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新做的 border 絕對定位。

• stylus 版本

border-1px($color)
  position: relative
  &:after
    display: block
    position
 
: absolute
    content: ' '
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
      
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
	  transform: scaleY(0.5)

使用的時候就是：
1、呼叫border-1px函式並傳遞顏色值，2、新增class【border-1px】

<style lang="stylus>
  div
  	width 100px
  	height 100px
    border-1px(rgba(7, 17, 27, 0.1))
</style>
<div class="border-1px"></div>

• css 版本

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

這裡有一個線上的例子：移動端1px

建議使用手機掃碼檢視：

移動端圖片適配

不同解析度下，使用不同的圖片。
dpr 為 2 就使用 2 倍圖。
dpr 為 3 就使用 3 倍圖。

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")