Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.74/23: Рейтинг темы: голосов - 23, средняя оценка - 4.74
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
1

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

01.04.2015, 18:55. Просмотров 4413. Ответов 21
Метки нет (Все метки)

Доброго времени суток уважаемые форумчане.
Столкнулся с таким вопросом. Необходимо сверстать адаптивный сайт с учетом качественного отображения на экранах с retina.
примеров как адаптировать под это дело изображения, валом и вроде вопросов не возникает. не понимаю одного, почему текст допустим в 32px на экране iphone весьма и весьма здоровы, хотя насколько я понимаю, учитывая двойню плотность пикселя шрифт должен вроде как уменьшиться...а приемлемого результата достигаю только в случае уменьшения шрифта в два раза. Подскажите плиз что не так делаю...
в HTML прописываю метатег:
HTML5
1
meta name="viewport" content="width=device-width, initial-scale=1.0">
в CSS я родительскому элементу придаю базовый размер шрифта
CSS
1
2
3
    html, body {
        font-size: 16px;
    }
а дальнейшие размеры шрифтов задаю в относительных единицах em:
CSS
1
2
3
4
    .text {
        margin-right: 2em;
        margin-left: 2em;
    }
и в итоге на iphon смотрится очень убого( и приходиться мутить след конструкцию:
CSS
1
2
3
4
5
6
7
8
9
10
@@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 568px), 
screen and (-moz-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (-ms-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (-o-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (min-device-pixel-ratio: 2) and (max-width: 568px) {
html, body {
        font-size: 8px;
    }
и далее уменьшаю все размеры в 2 раза, что в px, но как я понимаю такого быть не должно:(
}
и вроде смотрится норм...подогнал проверил..но проблема в том что мне еще надо и сверстать под ipad, а вот его у меня нету и черт его знает как правильно сверстать(..в наличии только ipad2 без ретины(
т.е. я как понимаю все надо вручную перебивать..и что размер в 70px на обычном устройстве таким же огромным почему то остается и на устройствах с retina (проверял, создал блок в 640px и на iphone 5 (разрешение 640 на 960, создал мне горизонтальную прокрутку в два экрана)
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.04.2015, 18:55
Ответы с готовыми решениями:

Адаптация под планшеты
Здравствуйте, сайт http://elzarimariam.kz , в сервисах проверки адаптации...

Просветите по особенностям верстки под CMS
Я уже вполне сносно могу верстать чистый html css. Осознаю, что сейчас...

Адаптация под браузер смартфона
Добрый день. Разрабатываю программку в блокноте при помощи html и js. Сохраняю...

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

Адаптация под разные разрешения
Доброго времени суток уважаемые форумчане. Вот такой вот гвоздь программы...

21
Xteda
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 20:02 2
Шрифт 16 пикселей и на ретине 16 пикселей, а не 8

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

Добавлено через 1 минуту
Вы не поверите, но css-разрешение 5 айфона 320 px
0
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
01.04.2015, 21:00  [ТС] 3
Вы не поверите, но css-разрешение 5 айфона 320 px

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

Добавлено через 7 минут
допустим у меня есть дизайн, ширина которого 1536рх а высота 2046рх, на нем есть два блока с div, которые занимаю по ширине 100% и по вертикали друг от друга имеют расстояние в 100рх. Один из них содержит шрифт 45рх а второй 25рх. Как это все сверстать чтобы норм смотрелось и на мониторе обычного пс и на айпаде под ретину?
0
Xteda
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 21:11 4
Попадались мне как-то дизайны нарисованные на 640 пикселях, но подразумевалось что это 320px. Действовал просто - уменьшал все в два раза (расстояния, шрифты)

Добавлено через 1 минуту
Цитата Сообщение от Alex_student Посмотреть сообщение
Как это все сверстать чтобы норм смотрелось и на мониторе обычного пс и на айпаде под ретину?
Верстаете от 1920 до 320, что бы все было хорошо. А под ретину оптимизируете графику.
1
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
01.04.2015, 21:20  [ТС] 5
вопрос просто в том, что работу принимает дизайнер и у дизайнера такая штука приемки...открываем готовыю верстку на афоне, делает скрин шот..открывает потом на компе и давай по пикселям сверять...насколько верен такой подход?
вот я походу и уменьшил все что было..чтобы получить норм размер..как писал:

CSS
1
2
3
4
5
6
7
8
9
10
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 568px), 
screen and (-moz-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (-ms-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (-o-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (min-device-pixel-ratio: 2) and (max-width: 568px) {
html, body {
        font-size: [B]8px;[/B]
    }
и далее уменьшаю все размеры в 2 раза, что в px, но как я понимаю такого быть не должно:(
}
Верстаете от 1920 до 320, что бы все было хорошо. А под ретину оптимизируете графику.
от вышерассказзаного способа приема готовой верстки, очень сложно на глаз сделать чтобы все в пиксель сходилось((

Добавлено через 2 минуты
я так понимаю что и для обычного пс я тоже все в два раза режу исходя из такого дизайна?
0
Xteda
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 21:25 6
Это вы зря, батенька. Объясните вашему, кхе-кхе, дизайнеру, что разрешение айфона 320 пикселей, а не 640 и подкиньте статью на хабре для прочтения.

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

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

Добавлено через 1 минуту
Цитата Сообщение от Alex_student Посмотреть сообщение
насколько верен такой подход?
Идиотский подход, однозначно. Да что говорить, если веб-дизайнер не в курсе про разрешения. Пусть уменьшает тогда свой макет в два раза и отдает вам
0
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
01.04.2015, 21:27  [ТС] 7
а как правильно и умно объяснить это дизайнеру?
а нарвавшись сегодня на статью ..последовал примеру уменьшения всего в два раза(

Добавлено через 1 минуту
т.е. фактически мои действия это уменьшаю все в два раза для айпада, а для десктопа так и оставляю 1к 1?
0
Xteda
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 21:28 8
Объясните ему разницу между физическими пикселями девайса и css-пикселями.
0
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
01.04.2015, 21:33  [ТС] 9
постараюсь) просто в эту тему вляпался только пару дней назад(( еще чуть плаваю..
Огромное спасибо за помощь..вроде начинаю понимать

Добавлено через 1 минуту
а как тогда правильно осуществлять приемку?
0
Xteda
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 21:36 10
Лучший ответ Сообщение было отмечено Alex_student как решение

Решение

Цитата Сообщение от Alex_student Посмотреть сообщение
т.е. фактически мои действия это уменьшаю все в два раза для айпада, а для десктопа так и оставляю 1к 1?
Вы поймите правильно, обычно нормальные дизайнеры рисуют дизайны на десктоп (например, 1280 или фулскрин на 1920, по-разному) и 320 пикселей, как конечное разрешение, иногда может быть промежуточный дизайн на 768. Но раз он нарисовал дизайн на 640 px имея ввиду 320, то придется уменьшать все в два раза на этом макете. А пиксель в пиксель сверять - это глупая затея. Разница будет всегда, каждый браузер рендерит текст по-разному (где-то буквы будут шире на 1 пиксель, к примеру.) И есть еще line-height, если его не задавать жестко, то в мозиле line-height на 1 пиксель больше, чем в хроме. В итоге это выльется в несоответствие по высоте.
1
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
01.04.2015, 21:48  [ТС] 11
блин хоть на bootstrap переходи((

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

Добавлено через 3 минуты
т.е. фактически то что я наворотил это жуткий каостыль и фактически можно быо обойтись банальным
@media (min-widht 320px)
{
верстка под айпад и просто узкое расширение
}
а то что наворотил это только для графических элементов)?
0
Xteda
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 22:01 12
Я работаю в студии, и как-то у нас с дизайнерами ни разу не возникали такие вопросы (видно мне попались неправильные дизайнеры ). Сверяем дизайн с версткой, но это никак не пиксель в пиксель, все понимают что точного схождения не будет (само собой разумеется, что если в макете отступы по 20 пикселей, то столько же будет и в верстке, или если блок меню занимает 40 пикселей, то в html он тоже 40, но если есть текстовый блок без четко очерченных границ, то он точно не будет соответствовать дизайну из-за рендеринга - будет разница по-высоте).

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

Добавлено через 4 минуты
Из своего шаблона
CSS
1
2
3
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi){
    код для ретины
}
0
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
01.04.2015, 22:04  [ТС] 13
Вся суть ретины заключается в отрисовке графики, чтобы картинки не распиксилизовывались, они должны быть больше в 1.5 раза (то есть, если в дизайне иконка 20х20, то для ретины она должна быть 30х30, но займет свои 20), но мы обычно берем в 2 раза больше. Или использовать svg.

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

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

Добавлено через 58 секунд
Огромное спасибо Вам. кажется начинает картина прояснятся..завтра начну воять, надеюсь до конца все дойдет)
0
Xteda
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 22:12 14
Цитата Сообщение от Alex_student Посмотреть сообщение
а как дизайнер фактически может сказать насколько соовтетсвуе макет на ападе тому что он нарисовал?
Для того что бы как-то сверить, ему придется уменьшить свой макет в два раза)), пусть поработает, все-таки новые впечатления). У нас такая техника - из psd делается jpg и вставляется как bg для нового чистого html. В 2 соседних вкладках открывается верстка и эта html'ка и сверяется визуально. Если будут значительные расхождения (ну 5 пикселей), то это сразу заметно (хотя обычно и 2-3 пикселя бросаются в глаза)
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2811 / 2380 / 1030
Регистрация: 15.12.2012
Сообщений: 8,824
Записей в блоге: 4
01.04.2015, 22:18 15
Alex_student, у меня к Вам назрел вопрос: а почему Вы шрифт задаёте в px, а не в em или vw, vh, rem?
0
Xteda
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 22:23 16
Хоть вопрос и не мне, но:
Я тоже задаю в px, это, наверное, дело привычки. Задавать в em - это правильный подход. Но себя я вот не смог приучить к относительным величинам, мне больше по-душе, когда я имею полный контроль над значениями.
0
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
01.04.2015, 23:03  [ТС] 17
Alex_student, у меня к Вам назрел вопрос: а почему Вы шрифт задаёте в px, а не в em или vw, vh, rem?
я в разделе body задаю стартовый размер
HTML5
1
2
3
html, body {
        font-size: 16px;
    }
а далее в em
HTML5
1
2
3
4
 .text {
        margin-right: 2em;
        margin-left: 2em;
    }
хотя мне так же более привычно задавать все в пикселях...а то хрен поймешь где что выстрелить может..
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2811 / 2380 / 1030
Регистрация: 15.12.2012
Сообщений: 8,824
Записей в блоге: 4
01.04.2015, 23:06 18
Alex_student, у Вас текст не масштабируется из - за пиксельных величин, а Вы удивляетесь - поэтому и спрашиваю...
0
Alex_student
18 / 18 / 8
Регистрация: 10.02.2013
Сообщений: 250
Завершенные тесты: 1
01.04.2015, 23:43  [ТС] 19
у Вас текст не масштабируется из - за пиксельных величин, а Вы удивляетесь - поэтому и спрашиваю...
предлагаете не оговаривать в разделе body размер шрифта?
просто я так понимал, что для каждого расширения создаем свой @media и там переопределяем размер шрифта...
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2811 / 2380 / 1030
Регистрация: 15.12.2012
Сообщений: 8,824
Записей в блоге: 4
01.04.2015, 23:52 20
Alex_student, я не предлагал - я спрашивал: почему вместо относительных величин, которые удобнее использовать, на мой взгляд, для адаптивной вёрстки, Вы используете фиксированные размеры шрифта...? Ну а Вы, как удобно так и делайте - только на вопрос ответьте...
0
01.04.2015, 23:52
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.04.2015, 23:52

Адаптация новостей под экран
Собственно сайт относительно нормально сделал так, что бы он одинаково...

Адаптация под браузер Сафари
В Хроме, Мозилле и т.п. строка полностью отображается (вторая миниатюра). А вот...

Адаптация страница под разные браузеры
Есть сайт. У меня всё отображается как надо: У других - по другому....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru