Macbook Pro的媒體查詢retina

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