Question

是否可以为13英寸和15英寸Macbook Pro Retina编写不同的媒体查询。我正在尝试各种各样的查询，但似乎没有正确的。我对开发很陌生，所以如果有人能为我提供两个独立于每个屏幕工作的媒体查询，我们将非常感激。

Answer 1

媒体查询是可以应用于CSS的过滤器。它们可以根据设备高度，宽度方向和分辨率轻松更改样式。

您可以使用以下媒体查询：

(max-width: 640px)
(min-width: 641px) and (max-width: 800px)
(min-width: 801px) and (max-width: 1024px)
(min-width: 1025px)

最后一个将适用于1025px以上的所有分辨率，例如。

Answer 2

一般来说，最好创建适用于特定大小以上的所有显示器的桌面样式。请尝试指定常规屏幕尺寸范围，而不是定位特定设备。您仍然可以单独定位视网膜设备，以便为更高分辨率的图像提供服务。

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

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

See Chris Coyier's guide for more details

媒体查询Macbook Pro视网膜

2 个答案: