В первом проекте создавалась страница с фиксированной шириной в 1000 пикселей. Такой подход имеет право на жизнь, но что случится, если такой макет открыть на устройстве, разрешение которого меньше 1000 пикселей по ширине? В таком случае появится горизонтальный скролл, который раздражает пользователей. Никому не хочется постоянно двигать контент, чтобы дочитать строку или увидеть боковую панель. Кроме очевидного неудобства, пользователь может просто не обратить внимания на то, что скролл существует. Тогда он возможно пропустит важную часть контента.
Создадим три блока, каждый из которых имеет ширину 300 пикселей и добавим их в контейнер с шириной 1000 пикселей. Посмотрим поведение браузера при отображении такого блока на большом и маленьком разрешении экрана.
Блок с шириной 1000 пикселей на экране с доступной шириной 1000 пикселей
Блок с шириной 1000 пикселей на экране с доступной шириной 860 пикселей
Одним из решений такой проблемы стало использование значений ширины в процентах, вместо пикселей. А точнее использование относительных единиц измерения вместо абсолютных. При таком подходе блоки всегда будут зависимы от текущего разрешения экрана устройства. Такой подход получил название «резиновая (fluid) вёрстка».
Что можно сделать с такой вёрсткой? Для начала необходимо убрать ширину контейнера, которая сейчас равняется 1000 пикселям. Внутри этого контейнера нам необходимо расположить три элемента так, чтобы они заполнили всё доступное пространство. Поделим 100% на 3 и получим, что размер одного элемента примерно будет равен 33%. Оставим немного места для отступов и возьмём ширину в 30%. После такого небольшого изменения мы получим следующую картину:
Блоки по 30% в контейнере с шириной 1000 пикселей
Блоки по 30% в контейнере с шириной 860 пикселей
Как видно, теперь блоки растягиваются и сжимаются в зависимости от разрешения экрана. Эта особенность используется и при создании адаптивного сайта.
Помимо очевидных плюсов, такая концепция даёт и некоторые минусы. Что случится, если разрешение экрана будет очень мало? Тогда наши блоки продолжат сжиматься до тех пор, пока они могут найти свободное место. Потом текст внутри блоков уже не сможет помещаться и выйдет за границы своего родителя. Устройства со столь малыми разрешениями найти сложно, но принцип того, что блоки будут сжиматься до «победного конца» необходимо всегда держать в голове при использовании относительных единиц измерения.
Резиновая вёрстка при экстремально малом разрешении экрана
Для решения такой ситуации отлично подойдёт использование стиля min-width
. Используя его, мы сможем задать «точку остановки», после которой контейнер и элементы внутри него перестанут сжиматься.
Такой же подход используется и для ограничения растягивания контента при больших значениях ширины. Чаще всего сайту достаточно 1200-1300 пикселей по ширине, чтобы комфортно читать текст. При больших разрешениях контент слишком сильно растягивается и становится очень сложно воспринимать длинные строки. «Точка остановки» в данном случае устанавливается с помощью правила max-width
, в котором указывается значение в абсолютных единицах измерения, таких как пиксели.
Создайте у себя на компьютере страницу, на которой будет два блока: боковая панель и блок с основным контентом. Используя относительные единицы измерения и свойства max-width min-width сделайте резиновый макет. Используя эмуляцию мобильного вида в вашем браузере, посмотрите на поведение макета.
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт