Как во время вопрос этот подоспел))) Я только что его решила. Верстала сайт для iphone ретина макет был на 640 потом когда всё закончила прошу выслать картинки для ретины на что мне и ответил тимлид что мол это и есть макет под ретину и делают они так специально мол уменьшить легко а увеличить то качество спадёт.
Думала - думала как это всё закончить побыстрее а то так старалась пиксель в пиксель а тут такое... Ну сначала Я прошла ступень с meta - штука вообще бесполезная так как на экранах nokia разрешением 480 (lumia) мы получим выхлоп ещё тот. На самсунгах и других не проверяла, но как же Я вышла из этой ситуации... Да легко! Но пришлось повозиться с расчётами под 480.
И так мы имеем макет 640 и нам нужно сделать его под 320 и желательно под 480 (плюс возможно накидать другие).
Первое что необходимо сделать так это у нашего body поставить ширину шрифта 10px а далее все шрифты прописывать в em причём если на макете шрифт 18px то мы пишем 1.8em.
Когда закончили править 640, приступим к 320. И так мы указываем ширину текста для body 5px и весь шрифт у нас готов, после берём в руки калькулятор и все значения в пикселях делим на 2. Если нужно под 480 то шрифт 7.5 и делим все значения на 1.5.
И тут у нас выходит что и овцы целы и волки сыты...
Да и ещё... единственное что нужно будет прописать в meta это
<meta name="viewport" content="width=device-width, initial-scale=1.0">
иначе работать не будет.
Картинки для ретины устанавливаем так
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (-ms-min-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2), screen and
(min-device-pixel-ratio: 2) {
.assessment li {
background-image: url(../media/images/sprite-1@2x.png); /* will be downloaded on retina displays */
}
}
Пиксель перфект может резайзить макеты так что Вы сможете с лёгкостью проверить их на соответствие
Простой
