Адаптивная верстка

Виды верстки

Фиксированная - макет разрабатывается с фиксированными параметрами (например, с точным указанием размеров в пикселях). Такой подход устарел и применяется редко.
Мобильная - сайт создается на выделенном поддомене и адаптируется только под мобильные устройства. Соответственно, ресурс станет удобен для чтения лишь пользователям смартфонов и планшетов.
Резиновая - ширина блока задается в процентах от ширины экрана пользователя. Благодаря этому "резиновые" сайты одинаково хорошо читаются с любых устройств. Тем не менее, адаптивная верстка, равно как и отзывчивая, постепенно вытесняет резиновую.
Отзывчивая - напоминает адаптивную верстку, но в то же время принципиально отличается от нее. Отличие заключается в действиях на брейк-поинтах. Если в адаптивном варианте браузер резко меняет сверстанный макет, то в отзывчивом происходит плавное изменение верстки между точками слома с максимальным сохранением стабильного вида страницы. Фактически данный подход сочетает в себе признаки адаптивности и "резиновости".
Адаптивная - Основные параметры сайта подстраиваются под характеристики пользовательского устройства. Ресурс в результате должен удобно читаться практически с любого гаджета или компьютера.

Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.

Медиазапросы (@media)

Синтаксис:

@media screen and (max-width: 768px) {
    /* Стили для планшетов и телефонов */
}

Mobile First: Сначала стили для мобильных, затем min-width.
Desktop First: Сначала для десктопов, затем max-width.

/* Различается и ориентация макета */
@media (orientation: landscape) {
	/* При горизонтальной ориентации фоновым цветом сайта будет белый */
	body {
		background: #FFF;
	}
}
/* Ещё существует portrait - вертикальная */

Flexbox (Flexible Box Layout)

Одномерная модель раскладки (по одной оси).

Контейнер: display: flex; / inline-flex;.
Направление: flex-direction: row | column | row-reverse.
Перенос: flex-wrap: wrap | nowrap.
Выравнивание по главной оси: justify-content: flex-start | center | space-between | space-around.
Выравнивание по поперечной оси: align-items: center | stretch.
Свойства элементов:
- flex-grow (коэффициент роста),
- flex-shrink (сжатие),
- flex-basis (базовый размер),
- order (порядок отображения).

Главная ось зависит от flex-direction:

row — главная ось горизонтальная;
column — главная ось вертикальная.

justify-content выравнивает по главной оси. align-items выравнивает по поперечной оси. Значение align-items по умолчанию — stretch.

Grid Layout

Двумерная модель раскладки (строки + столбцы).

Контейнер: display: grid;.
Определение сетки:
- grid-template-columns: repeat(3, 1fr); (3 колонки равной ширины).
- grid-template-rows: auto 1fr;.
Единица fr: Доля свободного пространства.
Функция repeat: сокращает повторяющиеся колонки или строки.
Функция minmax: задаёт минимальный и максимальный размер трека.
Отступы: gap: 10px;.
Размещение элементов:
- grid-column: 1 / 3; (от 1-й до 3-й линии).
- grid-row: 2 / span 2; (со 2-й линии на 2 ячейки).
Именованные области:

.container {
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}
header { grid-area: header; }

Сравнение Flex и Grid

Flexbox: Лучше для одномерных структур (меню, тулбары) и распределения пространства между элементами.
Grid: Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.

Простыми словами для экзамена

Flexbox — раскладка в одном направлении: строка или колонка. Grid — раскладка сразу по двум направлениям: строки и столбцы.

Flex-контейнер создаётся так:

.menu {
  display: flex;
}

Строчный flex-контейнер:

.menu {
  display: inline-flex;
}

Grid-контейнер:

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto minmax(200px, 1fr);
}

Термины Grid:

grid lines — линии сетки;
grid tracks — строки или столбцы между линиями;
grid cells — ячейки;
grid areas — именованные области.

fr делит свободное место. 1fr 2fr означает: второй столбец получит в два раза больше свободного места, чем первый.

7.1 KiB Raw Blame History