Question

如果我使用的是背景尺寸：封面，我想确保我的图像在分辨率为2880x1880的视网膜macbook pro上看起来不错，我是否只需要使图像具有分辨率，或者是否需要看起来很好，因为它是视网膜（例如，当你在网站上有一个图像时，如800px x 400px，但显示400px x 200px，以确保它在视网膜上看起来很好）。

.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;
    }

谢谢 - 非常感谢。

Answer 1

使图像大致为设备的分辨率。您可能希望为浏览器/ webclip chrome调整一点，以便最终的图像大小会有所不同。

有关详细信息，请参阅Custom Icon and Image Creation Guidelines。

其他背景

Retina显示设备的devicePixelRation为2 - 这是物理像素与设备无关像素的比例。来自quirks mode：

Dips是用于向信息提供信息的抽象像素 width / height媒体查询和元视口设备宽度。他们最好通过看一下视网膜之间的区别来解释和非视网膜设备。

以iPad为例，如果您要将视口设置为设备宽度，最终会得到（Safari always uses DIPS - see quirksmode）：

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

您可以根据DIPS布局标记，但使用基于物理像素的图像（视网膜显示时为x2）。

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

另外，要注意浏览器chrome占用的空间。例如，状态栏占整个屏幕的20px。

Retina显示背景大小：封面

1 个答案: