Як під час питання це наспів))) Я тільки що його вирішила. Верстала сайт для 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 це
інакше працювати не буде.
Картинки для ретини встановлюємо так
@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
Піксель перфект може резайзіть макети так що Ви зможете з легкістю перевірити їх на відповідність
640 це фізична роздільна здатність у айфона. Реальна роздільна здатність, яке айфон емулює - 320px. На нього і треба розраховувати. Суть ретина дисплея в тому, що дрібні деталі виглядають згладжено, а не в тому що там цілих 640px.
Це дозволяє домогтися глибини зображень, наприклад беремо картинку 200х200px, вставляємо і задаємо розміри width = 100 height = 100. Картинка буде дуже чіткою.
Ну це зрозуміло. А як все ж верстати цей макет під мобільники? Верстати з шириною 640px, а потім за допомогою media quories переписувати стилі під сітківку, звузивши для цього макет до 320px?