Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Аватары экспертов Хекслета

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»