前端開發之retina屏幕

像素 && ppi

首先先說一下pixel(picture element)，顯示圖像的最小單位，有多個帶色彩的像素點組成的總體就是一張圖像。而後再說一下ppi(pixel per inch)這個概念，其實就是在每英寸顯示的像素數。

設備像素 && 邏輯像素 && dpr

設備像素(device independent pixels): 設備屏幕的物理像素
邏輯像素(CSS pixels): CSS像素

CSS樣式和幾乎全部的javascript設置html DOM 元素都使用CSS像素，所以實際上歷來用不上設備像素，惟一的例外是screen.width/height。

dpr = 設備像素 / 邏輯像素

隨着技術的發展，移動設備的屏幕像素密度愈來愈高。從iphone4開始，蘋果公司推出了retina屏幕。。iphone4的分辨率提升了一倍，但屏幕尺寸卻沒有變化，這意味着一樣大小的屏幕上，像素多了一倍，因而dpr = 2。dpr也有對應的javascript屬性window.devicePixelRatio。以iphone5爲例，iphone5的CSS像素爲320px568px，dpr是2，因此其設備像素爲640px1136px

前端開發

如今的iphone 6plus的dpr是3，因此UE出的設計稿寬都是414 * 3的，而咱們在開發的時候都是把UE的字體、塊寬和高等標註同時 / 3，這樣就能和設計稿保持一致。當咱們截屏iphone 6plus瀏覽器中訪問開發好的網頁，放到ps中進行測量，和設計稿中一致。

在這裏必定要注意，在retina屏幕中顯示圖片的時候，爲了保證不失真模糊，圖片的尺寸必須是圖片的顯示尺寸 * dpr，這樣在retina屏幕中被放大dpr倍後纔會不失真。

例子

注意如下兩種實現方式都有問題，顯示單邊1px，在retina屏幕上會有一條細縫，4邊1px，在retina屏幕上會存在position定位從塊元素的padding開始定位，會覆蓋2條邊，另外2條邊則多出來了

單邊1px

codepen實例

如下代碼實現的是底部1px變換，其原理: 使用僞元素after絕對定位到塊元素底部，寬度100%，高度1px，在Y軸上縮放1倍，記住要設置背景色。

html

<div class="box-1px-bottom-border">I'm box 1px bottom border</div>

css

.box-1px-bottom-border {
  position: relative;
  width: 100px;
  height: 100px;
  background: #0f0;
  &:after {
    content: ' ';
    display: block;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #f00;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
    }
  }
}

四邊1px邊框

codepen實例

<div class="box-four-side-border">I'm box four side border</div>

css

.box-four-side-border {
  width: 100px;
  height: 100px;
  background: #00f;
  position: relative;
  &:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #f00;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(.5);
              transform: scale(.5);
    }
  }
}