Адаптация верстки под retina

Доброго времени суток уважаемые форумчане.
Столкнулся с таким вопросом. Необходимо сверстать адаптивный сайт с учетом качественного отображения на экранах с retina.
примеров как адаптировать под это дело изображения, валом и вроде вопросов не возникает. не понимаю одного, почему текст допустим в 32px на экране iphone весьма и весьма здоровы, хотя насколько я понимаю, учитывая двойню плотность пикселя шрифт должен вроде как уменьшиться...а приемлемого результата достигаю только в случае уменьшения шрифта в два раза. Подскажите плиз что не так делаю...
в HTML прописываю метатег:
в CSS я родительскому элементу придаю базовый размер шрифта
а дальнейшие размеры шрифтов задаю в относительных единицах em:
и в итоге на iphon смотрится очень убого( и приходиться мутить след конструкцию:
и вроде смотрится норм...подогнал проверил..но проблема в том что мне еще надо и сверстать под ipad, а вот его у меня нету и черт его знает как правильно сверстать(..в наличии только ipad2 без ретины(
т.е. я как понимаю все надо вручную перебивать..и что размер в 70px на обычном устройстве таким же огромным почему то остается и на устройствах с retina (проверял, создал блок в 640px и на iphone 5 (разрешение 640 на 960, создал мне горизонтальную прокрутку в два экрана)

0

Шрифт 16 пикселей и на ретине 16 пикселей, а не 8

Добавлено через 2 минуты
Оптимизировать нужно растровые изображения

Добавлено через 1 минуту
Вы не поверите, но css-разрешение 5 айфона 320 px

0

Вы не поверите, но css-разрешение 5 айфона 320 px

я понимаю что разрешение 320рх и точно так же как для ipad с разрешением 1536х2046 разрешение в csss будет 768х1024, но мне дали дизайны для айфона и апада в размере их реальных разрешений.... как мне тогда более правильно верстать то?
мне что сразу надо было делить на 2 или как? я ужо так запутался что слов нету(..

Добавлено через 7 минут
допустим у меня есть дизайн, ширина которого 1536рх а высота 2046рх, на нем есть два блока с div, которые занимаю по ширине 100% и по вертикали друг от друга имеют расстояние в 100рх. Один из них содержит шрифт 45рх а второй 25рх. Как это все сверстать чтобы норм смотрелось и на мониторе обычного пс и на айпаде под ретину?

0

Попадались мне как-то дизайны нарисованные на 640 пикселях, но подразумевалось что это 320px. Действовал просто - уменьшал все в два раза (расстояния, шрифты)

Добавлено через 1 минуту

Сообщение от Alex_student Как это все сверстать чтобы норм смотрелось и на мониторе обычного пс и на айпаде под ретину?

Верстаете от 1920 до 320, что бы все было хорошо. А под ретину оптимизируете графику.

1

вопрос просто в том, что работу принимает дизайнер и у дизайнера такая штука приемки...открываем готовыю верстку на афоне, делает скрин шот..открывает потом на компе и давай по пикселям сверять...насколько верен такой подход?
вот я походу и уменьшил все что было..чтобы получить норм размер..как писал:

Верстаете от 1920 до 320, что бы все было хорошо. А под ретину оптимизируете графику.
от вышерассказзаного способа приема готовой верстки, очень сложно на глаз сделать чтобы все в пиксель сходилось((

Добавлено через 2 минуты
я так понимаю что и для обычного пс я тоже все в два раза режу исходя из такого дизайна?

0

Это вы зря, батенька. Объясните вашему, кхе-кхе, дизайнеру, что разрешение айфона 320 пикселей, а не 640 и подкиньте статью на хабре для прочтения.

Добавлено через 1 минуту
Десктопный дизайн 1:1.

Добавлено через 47 секунд
Надо уменьшать psd в 2 раза тогда

Добавлено через 1 минуту

Сообщение от Alex_student насколько верен такой подход?

Идиотский подход, однозначно. Да что говорить, если веб-дизайнер не в курсе про разрешения. Пусть уменьшает тогда свой макет в два раза и отдает вам

0

а как правильно и умно объяснить это дизайнеру?
а нарвавшись сегодня на статью ..последовал примеру уменьшения всего в два раза(

Добавлено через 1 минуту
т.е. фактически мои действия это уменьшаю все в два раза для айпада, а для десктопа так и оставляю 1к 1?

0

Объясните ему разницу между физическими пикселями девайса и css-пикселями.

0

постараюсь) просто в эту тему вляпался только пару дней назад(( еще чуть плаваю..
Огромное спасибо за помощь..вроде начинаю понимать

Добавлено через 1 минуту
а как тогда правильно осуществлять приемку?

0

Сообщение от Alex_student т.е. фактически мои действия это уменьшаю все в два раза для айпада, а для десктопа так и оставляю 1к 1?

Вы поймите правильно, обычно нормальные дизайнеры рисуют дизайны на десктоп (например, 1280 или фулскрин на 1920, по-разному) и 320 пикселей, как конечное разрешение, иногда может быть промежуточный дизайн на 768. Но раз он нарисовал дизайн на 640 px имея ввиду 320, то придется уменьшать все в два раза на этом макете. А пиксель в пиксель сверять - это глупая затея. Разница будет всегда, каждый браузер рендерит текст по-разному (где-то буквы будут шире на 1 пиксель, к примеру.) И есть еще line-height, если его не задавать жестко, то в мозиле line-height на 1 пиксель больше, чем в хроме. В итоге это выльется в несоответствие по высоте.

1

блин хоть на bootstrap переходи((

Добавлено через 38 секунд
а где-то такие правила по дизайну оговариваются или вы исходя из своего опыта?

Добавлено через 3 минуты
т.е. фактически то что я наворотил это жуткий каостыль и фактически можно быо обойтись банальным
@media (min-widht 320px)
{
верстка под айпад и просто узкое расширение
}
а то что наворотил это только для графических элементов)?

0

Я работаю в студии, и как-то у нас с дизайнерами ни разу не возникали такие вопросы (видно мне попались неправильные дизайнеры ). Сверяем дизайн с версткой, но это никак не пиксель в пиксель, все понимают что точного схождения не будет (само собой разумеется, что если в макете отступы по 20 пикселей, то столько же будет и в верстке, или если блок меню занимает 40 пикселей, то в html он тоже 40, но если есть текстовый блок без четко очерченных границ, то он точно не будет соответствовать дизайну из-за рендеринга - будет разница по-высоте).

Добавлено через 3 минуты
Вся суть ретины заключается в отрисовке графики, чтобы картинки не распиксилизовывались, они должны быть больше в 1.5 раза (то есть, если в дизайне иконка 20х20, то для ретины она должна быть 30х30, но займет свои 20), но мы обычно берем в 2 раза больше. Или использовать svg.

Добавлено через 4 минуты
Из своего шаблона

0

Вся суть ретины заключается в отрисовке графики, чтобы картинки не распиксилизовывались, они должны быть больше в 1.5 раза (то есть, если в дизайне иконка 20х20, то для ретины она должна быть 30х30, но займет свои 20), но мы обычно берем в 2 раза больше. Или использовать svg.

я вот и читал, что для айпада это ровно два, а для того же андройда какого может быть и 1.5 и т.д)

а как дизайнер фактически может сказать насколько соовтетсвуе макет на ападе тому что он нарисовал?
или я делаю верстку под 320 и пусть на десктопе смотрит?

Добавлено через 58 секунд
Огромное спасибо Вам. кажется начинает картина прояснятся..завтра начну воять, надеюсь до конца все дойдет)

0

Сообщение от Alex_student а как дизайнер фактически может сказать насколько соовтетсвуе макет на ападе тому что он нарисовал?

Для того что бы как-то сверить, ему придется уменьшить свой макет в два раза)), пусть поработает, все-таки новые впечатления). У нас такая техника - из psd делается jpg и вставляется как bg для нового чистого html. В 2 соседних вкладках открывается верстка и эта html'ка и сверяется визуально. Если будут значительные расхождения (ну 5 пикселей), то это сразу заметно (хотя обычно и 2-3 пикселя бросаются в глаза)

0

Alex_student, у меня к Вам назрел вопрос: а почему Вы шрифт задаёте в px, а не в em или vw, vh, rem?

0

Хоть вопрос и не мне, но:
Я тоже задаю в px, это, наверное, дело привычки. Задавать в em - это правильный подход. Но себя я вот не смог приучить к относительным величинам, мне больше по-душе, когда я имею полный контроль над значениями.

0

Alex_student, у меня к Вам назрел вопрос: а почему Вы шрифт задаёте в px, а не в em или vw, vh, rem?

я в разделе body задаю стартовый размер
а далее в em
хотя мне так же более привычно задавать все в пикселях...а то хрен поймешь где что выстрелить может..

0

Alex_student, у Вас текст не масштабируется из - за пиксельных величин, а Вы удивляетесь - поэтому и спрашиваю...

0

у Вас текст не масштабируется из - за пиксельных величин, а Вы удивляетесь - поэтому и спрашиваю...

предлагаете не оговаривать в разделе body размер шрифта?
просто я так понимал, что для каждого расширения создаем свой @media и там переопределяем размер шрифта...

0

Alex_student, я не предлагал - я спрашивал: почему вместо относительных величин, которые удобнее использовать, на мой взгляд, для адаптивной вёрстки, Вы используете фиксированные размеры шрифта...? Ну а Вы, как удобно так и делайте - только на вопрос ответьте...

0