В первом проекте создавалась страница с фиксированной шириной в 1000 пикселей. Такой подход имеет право на жизнь, но что случится, если такой макет открыть на устройстве, разрешение которого меньше 1000 пикселей по ширине? В таком случае появится горизонтальный скролл, который раздражает пользователей.
Никому не хочется постоянно двигать контент, чтобы дочитать строку или увидеть боковую панель. Кроме очевидного неудобства, пользователь может просто не обратить внимания на то, что скролл существует. Тогда он возможно пропустит важную часть контента.
Создадим контейнер с шириной 800 пикселей, добавим немного стилей и текста. Внутри контейнера расположим три блока с шириной 245 пикселей:
Codepen
В этом примере суммарно блоки занимают 735 пикселей. Представим, что размер страницы изменился и теперь равен 600 пикселей. В этом случае все три блока не вместятся на страницу. Вместо этого появится горизонтальная прокрутка:
Codepen
Для эмуляции поведения браузера на контейнере используется свойство oveflow-x, которое скроет контент и добавит полосу прокрутки. Думайте о блоке .container как о браузере.
Когда компьютеры и интернет только появлялись, то разрешения экрана были почти стандартизированы. Использовалось несколько основных разрешений и разработчики могли фиксировать размеры элементов. С появлением мобильных устройств, ноутбуков, планшетов таких разрешений стало так много, что фиксировать размеры целых блоков стало неудобно. Постоянно появлялись полосы прокруток, и если вертикальная прокрутка воспринимается хорошо, то горизонтальная бесит пользователей.
Разработчикам стало важно опираться не на конкретные размеры, а высчитывать их исходя из размеров экрана. Для этого можно использовать проценты — вместо указания размера блока в пикселях можно высчитывать размер в процентах от родительского блока или от текущего разрешения экрана устройства.
Такой подход получил название резиновая (fluid) вёрстка.
Сделаем три блока резиновыми. Для этого уберём фиксированную ширину в 245 пикселей и заменим значение на 33%. Таким образом три блока займут почти всё доступное пространство:
Codepen
Изменяя размер страницы или блока будет меняться и размер блока с резиновой вёрсткой. Эта особенность используется и при создании адаптивного сайта.
Codepen
Помимо очевидных плюсов, такая концепция даёт и некоторые минусы. Что случится, если разрешение экрана будет очень мало? Тогда наши блоки продолжат сжиматься до тех пор, пока они могут найти свободное место. Потом текст внутри блоков уже не сможет помещаться и выйдет за границы своего родителя. Устройства со столь малыми разрешениями найти сложно, но принцип того, что блоки будут сжиматься до «победного конца» необходимо всегда держать в голове при использовании относительных единиц измерения.
Codepen
Для решения такой ситуации отлично подойдёт использование стиля min-width. Используя его, мы сможем задать «точку остановки», после которой контейнер и элементы внутри него перестанут сжиматься.
Такой же подход используется и для ограничения растягивания контента при больших значениях ширины. Чаще всего сайту достаточно 1200-1300 пикселей по ширине, чтобы комфортно читать текст. При больших разрешениях контент слишком сильно растягивается и становится очень сложно воспринимать длинные строки. «Точка остановки» в данном случае устанавливается с помощью правила max-width, в котором указывается значение в абсолютных единицах измерения, таких как пиксели.
Самостоятельная работа
Создайте у себя на компьютере страницу, на которой будет два блока: боковая панель и блок с основным контентом. Используя относительные единицы измерения и свойства max-width и min-width, сделайте резиновый макет. Используя эмуляцию мобильного вида в вашем браузере, посмотрите на поведение макета.
Дополнительные материалы
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
