В первом проекте создавалась страница с фиксированной шириной в 1000 пикселей. Такой подход имеет право на жизнь, но что случится, если такой макет открыть на устройстве, разрешение которого меньше 1000 пикселей по ширине? В таком случае появится горизонтальный скролл, который раздражает пользователей.
Никому не хочется постоянно двигать контент, чтобы дочитать строку или увидеть боковую панель. Кроме очевидного неудобства, пользователь может просто не обратить внимания на то, что скролл существует. Тогда он возможно пропустит важную часть контента.
Создадим контейнер с шириной 800 пикселей, добавим немного стилей и текста. Внутри контейнера расположим три блока с шириной 245 пикселей:
See the Pen css_adaptive_percent_1 by Hexlet (@hexlet) on CodePen.
В этом примере суммарно блоки занимают 735 пикселей. Представим, что размер страницы изменился и теперь равен 700 пикселей. В этом случае все три блока не вместятся на страницу. Вместо этого появится горизонтальная прокрутка:
See the Pen css_adaptive_percent_1 by Hexlet (@hexlet) on CodePen.
Для эмуляции поведения браузера на контейнере используется свойство oveflow-x, которое скроет контент и добавит полосу прокрутки. Думайте о блоке .container как о браузере.
Когда компьютеры и интернет только появлялись, то разрешения экрана были почти стандартизированы. Использовалось несколько основных разрешений и разработчики могли фиксировать размеры элементов. С появлением мобильных устройств, ноутбуков, планшетов таких разрешений стало так много, что фиксировать размеры целых блоков стало неудобно. Постоянно появлялись полосы прокруток, и если вертикальная прокрутка воспринимается хорошо, то горизонтальная бесит пользователей.
Разработчикам стало важно опираться не на конкретные размеры, а высчитывать их исходя из размеров экрана. Для этого можно использовать проценты — вместо указания размера блока в пикселях можно высчитывать размер в процентах от родительского блока или от текущего разрешения экрана устройства.
Такой подход получил название резиновая (fluid) вёрстка.
Сделаем три блока резиновыми. Для этого уберём фиксированную ширину в 245 пикселей и заменим значение на 33%. Таким образом три блока займут почти всё доступное пространство:
See the Pen css_adaptive_percent_2 by Hexlet (@hexlet) on CodePen.
Изменяя размер страницы или блока будет меняться и размер блока с резиновой вёрсткой. Эта особенность используется и при создании адаптивного сайта.
See the Pen css_adaptive_percent_2 by Hexlet (@hexlet) on CodePen.
Помимо очевидных плюсов, такая концепция даёт и некоторые минусы. Что случится, если разрешение экрана будет очень мало? Тогда наши блоки продолжат сжиматься до тех пор, пока они могут найти свободное место. Потом текст внутри блоков уже не сможет помещаться и выйдет за границы своего родителя. Устройства со столь малыми разрешениями найти сложно, но принцип того, что блоки будут сжиматься до «победного конца» необходимо всегда держать в голове при использовании относительных единиц измерения.
See the Pen css_adaptive_percent_3 by Hexlet (@hexlet) on CodePen.
Для решения такой ситуации отлично подойдёт использование стиля min-width. Используя его, мы сможем задать «точку остановки», после которой контейнер и элементы внутри него перестанут сжиматься.
Такой же подход используется и для ограничения растягивания контента при больших значениях ширины. Чаще всего сайту достаточно 1200-1300 пикселей по ширине, чтобы комфортно читать текст. При больших разрешениях контент слишком сильно растягивается и становится очень сложно воспринимать длинные строки. «Точка остановки» в данном случае устанавливается с помощью правила max-width, в котором указывается значение в абсолютных единицах измерения, таких как пиксели.
Самостоятельная работа
Создайте у себя на компьютере страницу, на которой будет два блока: боковая панель и блок с основным контентом. Используя относительные единицы измерения и свойства max-width min-width сделайте резиновый макет. Используя эмуляцию мобильного вида в вашем браузере, посмотрите на поведение макета.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
