retina-display - 视网膜显示和 ppi

Question

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

Answer 1

查看 Scotts 的答案 - https://graphicdesign.stackexchange.com/questions/13777/is-it-mandatory-to-keep-72-dpi-for-web-design-what-if-i-create-in-200dpi

基本上DPI无关紧要。Web 显示像素宽度和高度，因此对于 2 的设备像素比（Apple 称之为视网膜），您的图像必须恰好是两倍。

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

如果文字在图片文件中，则需要两倍大小

Answer 2

我自己一直在尝试这个。您不能使用高分辨率图像而不是两倍大小的图像，这似乎很奇怪。

因此，在回答您的问题时，是的，您需要使图像尺寸变大。我已经读到图像的大小应为 4 倍像素深度，例如 200 像素 x 300 像素的图像应设为 400 像素 x 600 像素，然后在您的 css 中将图像设为 50%。

您可能会发现这很难在图像根据窗口大小调整大小的完整框架中实现。

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

的CSS：

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

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

}
.imageHolder img{
width: 50%
}

div：

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