视网膜显示和ppi

Question

我可以使用相同的分辨率(Ppi)并将视网膜显示屏的图像尺寸增加一倍吗？例如，将400x800 72ppi图像用于200x400 72ppi图像？它看起来会完全一样吗？字体大小怎么样？

Answer 1

我自己也经历过这种情况。这似乎很奇怪，你不能使用高分辨率的图像，而不是两倍大小的图像。

因此，回答你的问题，是的，你需要使图像tice的大小。我已经读到，图像大小应为4x像素深度，例如，一个200px 300px的图像应该是400px x 600px，然后在您的css使图像50%。

你可能会发现这很难在fuild框架中实现，在这个框架中，图像根据窗口大小调整大小。

我已经在一个根据屏幕宽度调整大小的列div中尝试了一些用于视网膜显示图像的CSS。它似乎工作和div保持图像与视网膜显示图像样式为50%。

CSS：

.columnLeft{
float: left;
width: 30%
max-width: 200px;
min-width: 100px;

}
.imageHolder{
float: left;
width: 100%

}
.imageHolder img{
width: 50%
}

divs：

<div class="columnLeft">
    <div class="imageHolder">
       <img src="images/airline.jpg"/>
</div>

Answer 2

Web显示像素的宽度和高度，因此您的图像必须恰好是设备像素比率2的两倍(Apple将其称为视网膜)。

如果在图片之外使用文本，浏览器本身将创建所需的像素。

如果文本在图片文件中，则需要将其大小加倍