Retina display and ppi

Question

Могу ли я использовать такое же разрешение (ppi) и просто удвоить размер изображения для экрана сетчатки? Например, используйте изображение 400x800 72ppi для изображения 200x400 72ppi? Будет ли это выглядеть точно так же? Как насчет размеров шрифта?

Answer 1

Я сам это переживал. Кажется странным, что вы не можете использовать изображение с высоким разрешением, а не изображение в два раза больше.

Так что, отвечая на ваш вопрос, да, вы должны сделать размер изображения размером. Я прочитал, что изображение должно быть рассчитано на глубину 4x пикселей, например, изображение 200px x 300px должно быть сделано как 400px x 600px, а затем в вашем css сделать изображение 50%.

Возможно, это затруднило внедрение в рамки fuild, где размеры изображений изменяются в соответствии с размером окна.

Я экспериментировал с некоторым CSS для изображения изображения сетчатки в div div, который изменяется в соответствии с шириной экрана. Кажется, что это работает, и divs удерживают изображение с изображением сетчатки в стиле 50%.

СМЧ:

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

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

} 
.imageHolder img{ 
width: 50% 
} 

дива:

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

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 не имеет значения. Веб отображает ширину и высоту пикселя, поэтому ваше изображение должно быть ровно вдвое для коэффициента пикселя устройства 2 (Apple вызывает сетчатку).

Если вы используете текст за пределами изображения, сам браузер создаст нужные пиксели.

Если текст в файле изображения, оно должно быть в два раза больше