Question

在Windows上的Macbook Pro Retina和Chrome上使用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>

非视网膜非常好地显示图像，但视网膜图像没有按照应有的方式显示。我无法在div中看到整个图像 - 它似乎放大了图像，因此我只能看到一小部分。

如果我添加：

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

进入视网膜.sq-img-small.img-small-1区块然后它显示正常但我不认为我需要这样做，因为它应该从早先继承权利？或者是以某种方式受@media块影响的继承？

===============更新==============

经过进一步调查后，似乎为所有方形图像设置样式，然后指定每个图像的路径，当不在@media块内时，可以正常工作，但是当我在同一个内部执行相同操作时，它不起作用。 / p>

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

您尝试不工作有两种可能的原因。 background-size属性不会被继承，并且当未通过background - 简写属性指定属性时，此类属性会重置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大小（239像素乘239像素）？

由于您当前的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');
  }

Answer 3

你似乎在混合dpi和dppx数字：

根据本网站http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/，

dppx单位是一个新单位，等于webkit使用的设备像素比值。

但是，dppx单元不像dpi单元那样受到广泛支持。 FF 16.0+和Opera 12.10 +支持dppx单元。

IE目前不支持dppx单位。

（该网站有点陈旧，自v29以来Chrome支持dppx）

@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

此单位表示每px单位的点数。由于CSS与CSS px的比例为1:96，因此1dppx相当于96dpi，相当于CSS中显示的图像的默认分辨率，由图像分辨率定义。

source

设备示例：

iPhone 4拥有3.5英寸屏幕，640×960像素。这计算为326dpi屏幕，使用2dppi或每像素2个点。这个2dppi比率是'视网膜'，以及为什么资产是2倍的大小。此外，这就是640px宽度仅显示为浏览器320px的原因，因为它为每1个基于CSS的像素绘制两个“点”/像素。（将在两行像素上绘制1px边框）

CSS图像和Retina显示

3 个答案: