CSS 图像和 Retina 显示

Question

在 Macbook Pro Retina 和 Windows 上使用 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 块内时工作正常，但当我在一个内执行相同操作时不起作用。

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

您的尝试失败有 2 个可能的原因。 background-size 属性不会被继承，当没有通过background-shorthand 属性指定该属性时，此类属性会重置background-size。

因此，您不能期望 background-size 会从 .sq-img-small 继承到 .sq-img-small.img-small-1（但这可能不是问题，因为它们引用了相同的元素），并且因为您在 @987654328 上使用了速记属性@你重置了background-size。

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

至于工作的非视网膜图像；你的非视网膜图像可能是最开始的尺寸（239 像素 x 239 像素）吗？

由于您当前的background-size-规则无效，您可以将其移动到速记属性中，并最终减少 1 行 css，但在 background-规则中增加一点冗余。然而，这似乎是一个小小的牺牲，因为您已经有 no-repeat top leftin 了：

/* 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 使用的 device-pixel-ratio 值。

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

IE 目前不支持 dppx 单位。

（网站有点老了，dppx从v29开始就被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

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

source

设备示例：

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