Можно ли назвать данную верстку адаптивной?

Question

[Сергей Лаптев]

Доброго всем времени суток!
Наконец-то я закончил свой первый адаптивный макет! Дайте пожалуйста оценку товарищи специалисты. Просьба по голове не бить, указать на ошибки, дать рекомендации.
И можно ли назвать мою верстку адаптивной?
Вот что получилось slaptev.ru/Sedona_public

Спасибо за внимание!

Answer 1

[entermix]

Сделайте scrollwheel: false для карты

Comments

[Сергей Лаптев]

Спасибо, поправлю.

Answer 2

[deeppines]

И после исправления:

Чуть чуть подправить.

А Проверить еще можно переполнением контента, текст скажем не две три строки, а 5-6. Еще можно в браузере размерами шрифта поиграть, если конечно шрифт не px.

Comments

[Сергей Лаптев]

Честно говоря не сталкивался с такой проблемой, у меня в опере, хроме и фоксе меню отображается нормально. Как у вас получился такой эффект?

[deeppines]

Просто уменьшил окно браузера. Скорее всего я попал на ключевую точку media, где старые стили уже кривые, а новые вступят в силу через 1px.

[Сергей Лаптев]

Lucas Kane: Прощелкал каждый пиксел, но не смог добиться такого поведения) Медиа запрос срабатывает на 768px

[deeppines]

Устанавливаю размер окна на 768px и собсно выходит такая картинка, проверил еще раз.
Собсно все дело в шрифтах, базовый у тебя в px, а все что в меню в rem, тобишь рассчитывается от базового значения.
Как вариант установить базовое в 62.5% /* 10px */, при условии что в браузере шрифт по умолчанию выставлен на 16px, а вот остальные в em. Допустим 16px уже станет 1.6em. Только проблема будет в том, что em будет брать значение родителя, если вложенность большая, то расчеты станут нудными.
Надеюсь, что понятно описал)
Или, как вариант, менять базовое значение шрифта через медиа запрос.

[Сергей Лаптев]

Lucas Kane: Я так понимаю у вас в браузере увеличен шрифт? У меня изначально размер шрифта для ссылок меню задан 1.2rem, увеличил до 1.4rem получил такую картину.
Про em понятно, спасибо.

[deeppines]

Сергей Лаптев: нет, у меня все стандартно 16px. Просто при rem значение рассчитывается всегда от базового значения, а оно 16px, получается что, шрифты не изменяются при уменьшении экрана и верстка едет, так как ширина элемента зависит от шрифта. Это если я правильно понимаю.
Лучше всего на эту тему прочитать первую главу из книги Дэна Седерхольма "Пуленепробиваемый дизайн", там все разжевано по полочкам в плане адаптивности шрифтов.

[Сергей Лаптев]

Lucas Kane: Спасибо! Прочел первую главу книги, попробую использовать подход с 62.5% и rem.

[Сергей Лаптев]

Lucas Kane: Переделал. Если не трудно, можете посмотреть как сейчас отображается?

[deeppines]

Сергей Лаптев: Прикрепил еще скрин, меню поправилось, но вылезла горизонтальная прокрутка в 1-2 пикселя, и еще не понятно белые стрелы на картинке так и должны идти с горизонтальным разрывом или нет?

[Сергей Лаптев]

Так не должно быть. Горизонтальная прокрутка появилась из-за того что у одного из элементов был каким то мне неизвестным образом задан width: 100.09% :) Почему то не заметил этого.
Горизонтального разрыва тоже не должно быть, проблема была с позиционированием белых стрелок. Вроде поправил.

[deeppines]

Сергей Лаптев: .intro:: after { top: 9% } - тогда норм стрелки отображаются и еще псевдоэлементы лучше задавать через одно двоеточие, с двумя вылезут проблемы на Ослике, вроде девятом.

[Сергей Лаптев]

Lucas Kane: Ага, ie 9 не понимает, исправлю.
А вот если у себя ставлю 9%, то все съезжает вниз немного, получается уже некрасиво.

[deeppines]

Сергей Лаптев: Странно, в Мозиле нужно 7%, в хроме 9%, у меня такое чувство, что они по разному рассчитывают это значение.

Answer 3

[Сергей Горячев]

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

Answer 4

[Zadavajka]

посмотрел с телефона 4.3 дюйма вроде бы хорошо, ничего никуда не уплыло :) можно вопрос ? как вы разместили ваш макет в интернете ? -_-

Comments

[Сергей Лаптев]

Разместил на бесплатном хостинге hostinger.ru

Answer 5

[Дмитрий Новиков]

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