Гибкие макеты

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 63 из 76.

В адаптивном веб-дизайне резиновый макет подстраивается под различные размеры экранов, используя гибкие сетки и относительные единицы измерения, такие как проценты, вместо фиксированных значений в пикселях. Это помогает макету расширяться или сжиматься, подстраиваясь под любой экран и обеспечивая удобство работы пользователя на всех устройствах.

Основные принципы резиновой верстки включают:

Относительные единицы измерения: Использование процентов (%), единиц вьюпорта (vw, vh) или em (em) вместо фиксированных пикселей (px) для ширины, высоты, внешних и внутренних отступов.

Гибкие сетки: Использование CSS Grid или Flexbox для создания макетов на основе сеток, которые могут адаптироваться к различным размерам экрана.

Max-width и min-width: Установка максимальной и минимальной ширины для элементов, чтобы предотвратить их чрезмерное расширение или сужение на экранах с экстремальными размерами.

Вот пример базового резинового макета с использованием процентов:

.container {
    width: 90%; /* Контейнер занимает 90% ширины области просмотра */
    max-width: 1200px; /* Контейнер не будет превышать 1200px */
}
.sidebar {
    width: 30%; /* Боковая панель занимает 30% ширины контейнера */
    float: left;
}
.main-content {
    width: 70%; /* Основная область контента занимает 70% ширины контейнера */
    float: left;
}

В этом примере элемент .container имеет адаптивную ширину 90%, что означает, что он всегда будет занимать 90% ширины области просмотра. Свойство max-width установлено в значение 1200px, чтобы предотвратить чрезмерное расширение контейнера на больших экранах.

Элементы .sidebar и .main-content имеют гибкую ширину 30% и 70% соответственно, что позволяет им адаптироваться к ширине контейнера.

Задание

Легко

Вам дан HTML-документ с родительским блоком (<div>), который содержит два дочерних блока (<div>) с классами sidebar и main. Ваша задача — создать адаптивный макет, используя проценты. Выполните следующие шаги:

Напишите CSS-правило для элемента <div> с классом container. Установите его свойство width в значение 80%, а margin — в 0 auto. Добавьте border со значением 1px solid black для визуализации.
Напишите CSS-правило для элемента <div> с классом sidebar. Установите его свойство width в значение 25% и задайте ему обтекание float со значением left.
Напишите CSS-правило для элемента <div> с классом main. Установите его свойство width в значение 75% и задайте ему обтекание float со значением right.

Шпаргалка

Резиновый макет подстраивается под различные размеры экрана, используя гибкие сетки и относительные единицы измерения, такие как проценты, вместо фиксированных значений в пикселях.

Основные принципы резиновых макетов:

Относительные единицы: используйте проценты (%), единицы вьюпорта (vw, vh) или em (em) вместо фиксированных пикселей
Гибкие сетки: используйте CSS Grid или Flexbox для создания адаптивных макетов
Max-width и min-width: устанавливайте ограничения, чтобы элементы не становились слишком широкими или узкими

Пример базового резинового макета:

.container {
    width: 90%; /* Занимает 90% ширины вьюпорта */
    max-width: 1200px; /* Не будет превышать 1200px */
}
.sidebar {
    width: 30%; /* 30% от ширины контейнера */
    float: left;
}
.main-content {
    width: 70%; /* 70% от ширины контейнера */
    float: left;
}

Попробуйте сами

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>