Гибкие элементы — CSS: Адаптивность сайта

В первом проекте создавалась страница с фиксированной шириной в 1000 пикселей. Такой подход имеет право на жизнь, но что случится, если такой макет открыть на устройстве, разрешение которого меньше 1000 пикселей по ширине? В таком случае появится горизонтальный скролл, который раздражает пользователей. Никому не хочется постоянно двигать контент, чтобы дочитать строку или увидеть боковую панель. Кроме очевидного неудобства, пользователь может просто не обратить внимания на то, что скролл существует. Тогда он возможно пропустит важную часть контента.

Создадим три блока, каждый из которых имеет ширину 300 пикселей и добавим их в контейнер с шириной 1000 пикселей. Посмотрим поведение браузера при отображении такого блока на большом и маленьком разрешении экрана.

Блок с шириной 1000 пикселей на экране с доступной шириной 1000 пикселей

Блок с шириной 1000 пикселей на экране с доступной шириной 860 пикселей

Одним из решений такой проблемы стало использование значений ширины в процентах, вместо пикселей. А точнее использование относительных единиц измерения вместо абсолютных. При таком подходе блоки всегда будут зависимы от текущего разрешения экрана устройства. Такой подход получил название «резиновая (fluid) вёрстка».

Что можно сделать с такой вёрсткой? Для начала необходимо убрать ширину контейнера, которая сейчас равняется 1000 пикселям. Внутри этого контейнера нам необходимо расположить три элемента так, чтобы они заполнили всё доступное пространство. Поделим 100% на 3 и получим, что размер одного элемента примерно будет равен 33%. Оставим немного места для отступов и возьмём ширину в 30%. После такого небольшого изменения мы получим следующую картину:

Блоки по 30% в контейнере с шириной 1000 пикселей

Блоки по 30% в контейнере с шириной 860 пикселей

Как видно, теперь блоки растягиваются и сжимаются в зависимости от разрешения экрана. Эта особенность используется и при создании адаптивного сайта.

Помимо очевидных плюсов, такая концепция даёт и некоторые минусы. Что случится, если разрешение экрана будет очень мало? Тогда наши блоки продолжат сжиматься до тех пор, пока они могут найти свободное место. Потом текст внутри блоков уже не сможет помещаться и выйдет за границы своего родителя. Устройства со столь малыми разрешениями найти сложно, но принцип того, что блоки будут сжиматься до «победного конца» необходимо всегда держать в голове при использовании относительных единиц измерения.

Резиновая вёрстка при экстремально малом разрешении экрана

Для решения такой ситуации отлично подойдёт использование стиля min-width. Используя его, мы сможем задать «точку остановки», после которой контейнер и элементы внутри него перестанут сжиматься.

Такой же подход используется и для ограничения растягивания контента при больших значениях ширины. Чаще всего сайту достаточно 1200-1300 пикселей по ширине, чтобы комфортно читать текст. При больших разрешениях контент слишком сильно растягивается и становится очень сложно воспринимать длинные строки. «Точка остановки» в данном случае устанавливается с помощью правила max-width, в котором указывается значение в абсолютных единицах измерения, таких как пиксели.

Дополнительные материалы

• min-width
• max-width

Дополнительное задание

Создайте у себя на компьютере страницу, на которой будет два блока: боковая панель и блок с основным контентом. Используя относительные единицы измерения и свойства max-width min-width сделайте резиновый макет. Используя эмуляцию мобильного вида в вашем браузере, посмотрите на поведение макета.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.