Retina 的螢幕對策

方法一

想顯示的尺寸 100 x 100 px

1. img圖片

 <img src="img/sample.png" width="100" height="100" alt="">

2. 背景圖片

/*尺寸可變下*/
.selector {
  background: url(img/sample.png) no-repeat;
  bavkground-size: 100px 100px;
}

/*尺寸固定下*/
.selector {
  width: 100px;
  height: 100px;
  background: url(img/sample.png) no-repeat;
  bavkground-size: contain;
}

方法二

響應式圖片方式

(1)背景圖

CSS3 Media 媒體查詢

@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx) {
  .selector {
    background: url(../img/[email protected]) no-repeat;
    bavkground-size: 100px 100px;  
  }
}

(2) img圖片

利用 Retina.js

• 準備兩倍大尺寸圖片,檔名後面加@2x
• 引入Retina.js

只要偵測瀏覽器環境是Retina螢幕，此javascript就會自動將圖片切換到@2x的檔案

方法三

新屬性應用

• srcset 屬性
• picture元素
• image-set()元素