Доброго всем времени суток!
Наконец-то я закончил свой первый адаптивный макет! Дайте пожалуйста оценку товарищи специалисты. Просьба по голове не бить, указать на ошибки, дать рекомендации.
И можно ли назвать мою верстку адаптивной?
Вот что получилось slaptev.ru/Sedona_public
А Проверить еще можно переполнением контента, текст скажем не две три строки, а 5-6. Еще можно в браузере размерами шрифта поиграть, если конечно шрифт не px.
Устанавливаю размер окна на 768px и собсно выходит такая картинка, проверил еще раз.
Собсно все дело в шрифтах, базовый у тебя в px, а все что в меню в rem, тобишь рассчитывается от базового значения.
Как вариант установить базовое в 62.5% /* 10px */, при условии что в браузере шрифт по умолчанию выставлен на 16px, а вот остальные в em. Допустим 16px уже станет 1.6em. Только проблема будет в том, что em будет брать значение родителя, если вложенность большая, то расчеты станут нудными.
Надеюсь, что понятно описал)
Или, как вариант, менять базовое значение шрифта через медиа запрос.
Lucas Kane: Я так понимаю у вас в браузере увеличен шрифт? У меня изначально размер шрифта для ссылок меню задан 1.2rem, увеличил до 1.4rem получил такую картину.
Про em понятно, спасибо.
Сергей Лаптев: нет, у меня все стандартно 16px. Просто при rem значение рассчитывается всегда от базового значения, а оно 16px, получается что, шрифты не изменяются при уменьшении экрана и верстка едет, так как ширина элемента зависит от шрифта. Это если я правильно понимаю.
Лучше всего на эту тему прочитать первую главу из книги Дэна Седерхольма "Пуленепробиваемый дизайн", там все разжевано по полочкам в плане адаптивности шрифтов.
Сергей Лаптев: Прикрепил еще скрин, меню поправилось, но вылезла горизонтальная прокрутка в 1-2 пикселя, и еще не понятно белые стрелы на картинке так и должны идти с горизонтальным разрывом или нет?
Так не должно быть. Горизонтальная прокрутка появилась из-за того что у одного из элементов был каким то мне неизвестным образом задан width: 100.09% :) Почему то не заметил этого.
Горизонтального разрыва тоже не должно быть, проблема была с позиционированием белых стрелок. Вроде поправил.
Сергей Лаптев: .intro:: after { top: 9% } - тогда норм стрелки отображаются и еще псевдоэлементы лучше задавать через одно двоеточие, с двумя вылезут проблемы на Ослике, вроде девятом.
Не люблю смотреть и проверять чужой код, скажу, что вижу визуально - мне погнравилась реализация, хотя и не понравился макет) В целом, как заказчик наверно я остался бы доволен.
Честно, смотреть код влом) Оценку дадут другие)))
возьмите комп с большим монитором, небольшой ноутбук, планшет и телефон. и откройте на них на всех свой сайт.
смотрится хорошо? ничего не съезжает? горизонтальной прокрутки нигде нет? блоки друг на друга не налезают? текст везде читабелен? ну, значит все в порядке.
Простой
