Зарегистрируйтесь для доступа к 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 сделайте резиновый макет. Используя эмуляцию мобильного вида в вашем браузере, посмотрите на поведение макета.


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

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

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

Для полного доступа к курсу нужен базовый план

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

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

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

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

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

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

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

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

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

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»