瞭解視網膜設備CSS媒體查詢

Question

我正在研究WordPress主題，並試圖將視網膜啓用的CSS查詢合併到我的CSS文件中。

我只想澄清一下，在更換所有背景圖像之前，我已正確設置了媒體查詢。

1. 我已經翻了一番我所有的背景圖片的大小和perfixed 它們與「@ 2X」命名約定。例如icon-user@2x.png。
2. 我在我的代碼中添加了一個jQuery函數，用於替換帶有CSS類hires的圖像。
3. 在我的CSS文檔中，我有一個普通的CSS類用於背景圖片。

普通CSS查詢

.side-nav .arrow { 
    background: url(../images/arrow-nav.png) no-repeat top left; 
    width: 5px; 
    height: 8px; 
    display: inline-block; 
    margin-left: 10px 
} 

這是正確的方式，我會改變對視網膜功能設備.side-NAV .arrow類？在聲明背景大小時，我是否保留原始較小圖像的大小？

/* All Retina Ready devices larger than 1.5 pixel ratio */ 
@media only screen and (-moz-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min-device-pixel-ratio: 1.5) { 

    .side-nav .arrow { 
     background-image:url(../images/arrow-nav@2x.png); 
     -webkit-background-size:5px 8px; 
     -moz-background-size:5px 8px; 
     -o-background-size:5px 8px; 
     background-size:5px 8px 
    } 
} 

jQuery代碼

$(function() { 

    if (window.devicePixelRatio == 2) { 

      var images = $("img.hires"); 

      /* loop through the images and make them hi-res */ 
      for(var i = 0; i < images.length; i++) { 

      /* create new image name */ 
      var imageType = images[i].src.substr(-4); 
      var imageName = images[i].src.substr(0, images[i].src.length - 4); 
      imageName += "@2x" + imageType; 

      /* rename image */ 
      images[i].src = imageName; 
      } 
    } 

}); 

謝謝

Answer 1

只要有某種形式的比例正在發生，當你聲明

<meta name="viewport" content="width=...">（針對Android/IOS像/ blackberry/WP8）

或

@ms-viewport {width: ... ;}（非WP8 IE10）

或...即使你沒有申報大部分移動設備將默認自動縮放，使得視口寬度= 980px

那麼所有的CSS尺寸您聲明'px'將以與其視口相同的比例存在，無論它們的物理DPI/PPI之間的差異如何，這意味着您不應該更改關於您的樣式類的一件事，除了背景圖片的URL媒體查詢匹配高分辨率設備：

@media only screen and (-moz-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 144dpi) { 
    .side-nav .arrow { 
     background-image:url(../images/arrow-nav@2x.png); 
    } 
}