Выбор контрольных точек в адаптивной вёрстке

Обычно при адаптивной вёрстке используют некий определённый набор контрольных точек, основанный на разрешениях популярных устройств. Например, 320, 480, 768 и 1024 пикселя. Это приводит к тому, что сайт не всегда хорошо выглядит на промежуточных разрешениях, а устройств, отличающихся от айфона и айпада разрешением, с каждым месяцем становится всё больше.

Другой подход — брать за основу реальный контент. Плавно уменьшать ширину браузера (или увеличивать, если вы сторонник подхода mobile first), и смотреть, в какой момент сайт начинает разваливаться. Это значение и нужно использовать в медиа-выражении.

Помогает мне в этом расширение для Хрома Window Size, которое показывает текущие размеры окна браузера сразу после их изменения:

Window Size

P. S. Недавно на Смешинг Мэгазине появилась хорошая (хоть и очень длинная) статья на эту тему. Кроме выбора контрольных точек по контенту, там советуют следить за расположением контента в порядке важности на всех разрешениях.

Вы можете улучшить этот пост, отредактировав его на Гитхабе.

Обо мне

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

Читайте обо мне на моём сайте и подпишитесь на мой блог о фотографии и твитер.