CSS圖像和視網膜顯示

Question

在Windows上使用Chrome瀏覽器的Macbook Pro Retina和Chrome瀏覽器時，我在嘗試顯示非視網膜和視網膜顯示圖像時出現一些奇怪的現象。

我有一些方形圖像和CSS如下：

/* NON RETINA */ 

/* style for all square images so no need to repeat */ 
.sq-img-small { 
    background-size: 239px 239px; 
    width:239px; 
    height:239px; 
    float:left; 
    margin:0 0 20px 10px; 
} 

.sq-img-small.img-small-1 { 
    background: url('../images/squares/food1.jpg') no-repeat top left; 
} 


/* RETINA */ 
@media 
    (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 

    .sq-img-small.img-small-1 { 
    background: url('../images/squares/food1.2x.jpg') no-repeat top left; 
    } 

我的HTML是：

<div class="sq-img-small img-small-1"></div> 

非Retina顯示屏上的圖像非常清楚，但是視網膜圖像不應該顯示他們應該。我無法看到div中的整個圖像 - 它似乎放大了圖像，所以我只能看到一小部分。

如果我添加：

background-size: 239px 239px; 
width:239px; 
height:239px; 

到視網膜.sq-img-small.img-small-1塊則顯示正常，但我不認爲我會需要做這個，因爲它應該在先權利繼承？或者在某種程度上受到@media區塊影響的繼承？

=============== UPDATE ==============

經過進一步調查，似乎設置樣式爲所有正方形的圖像，然後指定每個圖像的路徑，當不在@media塊內時工作正常，但當我在內部執行相同操作時不起作用。

Answer 1

只是給你一個例子。嘗試此解決方案。

/* for low resolution display */ 

.image { 

    background-image: url(/path/to/my/lowreslogo.png); 
    background-size: 200px 300px; 
    height: 300px; 
    width: 200px; 

} 

/* for high resolution display */ 

@media only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) { 
.image {  
    background: url(/path/to/my/highreslogo.png) no-repeat;  
    background-size: 200px 400px;  
/* rest of your styles... */ 

} 
} 

Answer 2

你似乎混合dpi和DPPX數字：

根據該網站，http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/，

的DPPX單元是一個新的單元，其是等於裝置像素webkit使用的-ratio值。

但是，dppx單元並不像dpi單元那樣受到廣泛支持。 FF 16.0+和Opera 12.10+支持dppx單元。

IE目前不支持dppx單元。

（該網站是一個小老頭，由於V29 DPPX由Chrome瀏覽器支持）

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

什麼DPPX和DPI之間的區別？

DPI

該單元代表每英寸點數。屏幕通常包含72或96 dpi;印刷文件通常達到更高的dpi。

DPPX

該單元表示每像素單位的點的數量。由於CSS對CSS px的比例爲1:96，因此1dppx等於96dpi，對應於圖像分辨率定義的CSS中顯示圖像的默認分辨率。

source

設備例如：

4的iPhone具有3.5「屏幕中，在640×960像素。這將計算爲一個326dpi的屏幕，它使用2dppi或每像素2個點。這個2dppi比率就是'視網膜'，以及資產爲什麼是2倍的大小。此外，這也是爲什麼640px寬度僅顯示爲320px的瀏覽器，因爲它爲每1個基於CSS的像素繪製兩個「點」/像素。 （1px邊框將繪製在兩行像素上）

Answer 3

有兩種可能的原因會導致您的嘗試不能正常工作。 background-size屬性未被繼承，並且未通過background -shorthand屬性指定屬性時，此屬性將重置background-size。

因此，你不能指望background-size從.sq-img-small繼承到.sq-img-small.img-small-1（但是這可能不是一個問題，因爲它們引用相同的元素），因爲你使用簡寫屬性上.sq-img-small.img-small-1重置background-size。

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size。

至於工作的非視網膜圖像;你的非視網膜圖像可能是coorect尺寸（239px×239px）？

由於您目前的background-size規則無效，因此您可以將其移至速記屬性中，最後減少1行css，但在background規則中多餘一點。這似乎是一個小的犧牲不過，因爲你已經有no-repeat top left在那裏：

/* style for all square images so no need to repeat */ 
.sq-img-small { 
    width:239px; 
    height:239px; 
    float:left; 
    margin:0 0 20px 10px; 
} 

.sq-img-small.img-small-1 { 
    background: url('../images/squares/food1.jpg') no-repeat top left/239px 239px; 
} 


/* RETINA */ 
@media 
    (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 

    .sq-img-small.img-small-1 { 
    background: url('../images/squares/food1.2x.jpg') no-repeat top left/239px 239px; 
    } 

或者，你可以嘗試移動簡寫成一般情況下，但似乎你在更新嘗試這樣做，它沒沒有工作：

/* style for all square images so no need to repeat */ 
.sq-img-small { 
    background: no-repeat top left/239px 239px; 
    width:239px; 
    height:239px; 
    float:left; 
    margin:0 0 20px 10px; 
} 

.sq-img-small.img-small-1 { 
    background-image: url('../images/squares/food1.jpg'); 
} 


/* RETINA */ 
@media 
    (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 

    .sq-img-small.img-small-1 { 
    background-image: url('../images/squares/food1.2x.jpg'); 
    }