具有新屏幕分辨率的CSS像素和光學尺寸（如Retina）

我期望讓我的網站在標準屏幕上的視網膜和其他更高分辨率屏幕上顯示相同的尺寸。這就是說，讓他們光學看起來相同，但在更高分辨率的屏幕上有更多細節。具有新屏幕分辨率的CSS像素和光學尺寸（如Retina）

所以如果我們有一個四倍於每英寸像素數的屏幕，那麼我會希望元素的高度和寬度是普通CSS像素測量的兩倍，以及將字體大小加倍。

我看着這看起來解決方案檢測DPI，然後加載不同的CSS。

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */ 
}

事情是這些屏幕都有不同的DPIs。

iPhone 4/4S and iPod Touch (4th generation) -- 326 
iPad (3rd)/4th generation) -- 264 
MacBook Pro with Retina Display 15" -- 220 
MacBook Pro with Retina Display 13" -- 227

所以，如果我們有一個高度爲24px的元素。我希望它能夠調整其高度以準確地適合任何像素比例。 IE瀏覽器。做數學，併爲所有元素做。

來源

2013-04-27 Robin Knight

您不改變圖像尺寸，只要給它適當的來源即可。

你也可以把不同的查詢，在這裏看到： http://css-tricks.com/snippets/css/retina-display-media-query/

來源

2013-05-06 15:49:54 brannigan

我建議你閱讀這兩個dpi和dppx。當你看看Retina顯示器時，你需要考慮CSS像素和物理像素，因爲我相信你知道。

如果你想擁有網站的其它的組件出現在相同的物理尺寸，那麼我認爲dpi是要走的路，但和你想，如果你要區分覆蓋BU不同dpi級別添加不同的CSS視網膜和正常顯示之間需要dpi和dppx（點每肌肉發展英寸）

這些文章都幫我區分：

https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

http://drewwells.net/blog/2013/working-with-dppx/

來源

2014-02-27 15:19:42 Mathias

具有新屏幕分辨率的CSS像素和光學尺寸（如Retina）

回答

相關問題