Retina显示和ppi

Question

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

Answer 1

我自己一直在体验这一点。你似乎很奇怪，你不能使用高分辨率的图像而不是两倍大小的图像。

所以在回答你的问题时，是的，你需要让图像大小合适。我已经读过图像的大小应该是4x像素深度，例如200px x 300px图像应该是400px x 600px，然后在你的CSS中使图像成为50％。

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

我在colum div中尝试了一些用于视网膜显示图像的CSS，根据屏幕宽度调整大小。它似乎工作和divs保持图像与视网膜显示图像风格为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>

答案 1 :(得分：0)

查看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

查看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称之为视网膜），您的图像必须精确加倍。

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

如果文字在图片文件中，则需要加倍