Как проверить, что вы всё сделали правильно? Что в разметке и в стилях нет ошибок и что результат соответствует макету? Можно воспользоваться разными инструментами, каждый для своих целей.
Он проверит ваш HTML на соответствие спецификациям, а так же поможет найти простые ошибки, вроде незакрытых тегов.
Подсказка: если валидатор говорит, что в section и article обязательно должны быть заголовки, добавьте их в разметку. Если в макете нет текста, подходящего по смыслу, можно сделать скрытые заголовки используя способ с классом .visuallyhidden, это важно для доступности.
Используйте эмулятор мобильных устройств, который есть в Хроме. Кнопка включения находится в панели разработчиков, вторая иконка в верхнем ряду:
В эмуляторе в выпадающем меню можно просто выбрать устройство с подходящими размерами, а можно кликнуть «Edit» и добавить свои:
Справа на скриншоте есть выпадушка с выбором типа устройства (на скриншоте Mobile), эта опция влияет на наличие прокрутки на странице. Чтобы прокрутка не отъедала ширину страницы, между Mobile и Desktop всегда выбирайте Mobile.
Там же можно скрыть устройства, которые вам не нужны.
Мой список устройств выглядит так:
Такой поход избавляет от необходимости подбирать размер окна руками, а так же позволяет быстро переключаться между вьюпортам, причём именно теми, которые нужны вам.
Не забывайте также проверять макеты на очень широких экранах (1400+), чтобы убедиться что и в этом случае страница не разваливается.
Pixel Glass больше подходит для работы над проектом с адаптивной вёрсткой (макеты будут меняться сами при изменении размеров окна), PerfectPixel — для быстрой проверки страниц.
Подсказка: проверьте, что в браузерах с поддержкой woff2 загрузится именно этот формат. Если грузится woff, проверьте порядок перечисления шрифтов. Браузер выбирает первый подходящий, а не оптимальный из перечисленных.
Плотность пикселей устройства можно выбрать в меню эмулятора:
Если там нет такой опции, нажмите на три точки в правой части панели устройств и включите её в выпадающем меню:
Если все адаптивные изображения содержат в своём адресе @, этот спецсимвол можно использовать для фильтрации, чтобы в панели показывались только те картинки, которые нужно проверить:
В панели устройств меняйте размеры экрана и плотность пикселей и смотрите какие изображения загрузились.
После этого вы сможете отредактировать любой текстовый элемент на странице и добавить в него текст. Это позволит проверить поведение страницы в случаях когда контента слишком мало или наоборот — слишком много.
При добавлении текста элементы должны тянуться по вертикали, текст не должен упираться в края элемента или обрезаться.
