媒體查詢視網膜和非視網膜螢幕

雖然這僅適用於基於 WebKit 的瀏覽器，但這很有用：

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

背景資料

顯示屏中有兩種型別的畫素。一個是邏輯畫素，另一個是物理畫素。大多數情況下，物理畫素始終保持不變，因為它對所有顯示裝置都是相同的。邏輯畫素基於裝置的解析度而改變，以顯示更高質量的畫素。器件畫素比是物理畫素和邏輯畫素之間的比率。例如，MacBook Pro Retina，iPhone 4 及以上版本的裝置畫素比率為 2，因為物理線性解析度是邏輯解析度的兩倍。

這僅適用於基於 WebKit 的瀏覽器的原因是：

• 規則前的供應商字首 -webkit-。
• 這在 WebKit 和 Blink 以外的引擎中尚未實現。