媒体查询视网膜和非视网膜屏幕

虽然这仅适用于基于 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 以外的引擎中尚未实现。