1

如果我使用 background-size: cover 并且我想确保我的图像在分辨率为 2880x1880 的视网膜 macbook pro 上看起来不错，我只需要使图像具有该分辨率，还是需要加倍该分辨率看起来不错，因为它是视网膜（例如，当您在站点中有一个图像，例如 800 像素 x 400 像素，但显示为 400 像素 x 200 像素以确保它在视网膜上看起来不错）。

.bg {
     color:#CCC;
    background-attachment:fixed; 
    background-repeat: no-repeat; 
    -moz-background-size: cover;
    -webkit-background-size: cover;
     background-size: cover;
     margin: 0;
     padding: 0;
    }

谢谢 - 非常感谢。

4

1 回答 1

1

使图像近似于设备的分辨率。您可能需要针对浏览器/webclip chrome 进行一些调整，以便最终图像大小会有所不同。

有关详细信息，请参阅自定义图标和图像创建指南。

附加背景

Retina 显示设备的 devicePixelRation 为 2 - 这是物理像素与设备无关像素的比率。从怪癖模式：

倾角是用于将信息提供给宽度/高度媒体查询和元视口设备宽度的抽象像素。最好通过查看视网膜设备和非视网膜设备之间的区别来解释它们。

以 iPad 为例，如果您将视口设置为 device-width 您最终会得到（Safari 始终使用 DIPS - 请参阅 quirksmode）：

               DIPS        Physical
               --------   ---------
non-retina:    768x1024    768x1024
    retina:    768x1024   1536x2048

您基于 DIPS 布局标记，但使用基于物理像素的图像（在视网膜显示器的情况下为 x2）。

另一种看待这个问题的方法是：由于视网膜的经验法则是非视网膜图像大小的 2 倍，因此2x (768x1024)用于视网膜或：1536x2048

另外，请注意浏览器 chrome 占用的不动产。例如，状态栏占整个屏幕的 20px。

于 2013-08-10T15:59:10.673 回答