From 67fbf5bbdb300e5c7d8f71c1c2853e72254a62b7 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Sun, 7 Jun 2026 18:13:09 +0300 Subject: [PATCH] vault backup: 2026-06-07 18:13:09 --- .../Programming/Web/Адаптивность, Flexbox и Grid.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md b/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md index 3964ca4..607b4dd 100644 --- a/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md +++ b/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md @@ -24,6 +24,7 @@ aliases: 2) **Мобильная** - сайт создается на выделенном поддомене и адаптируется только под мобильные устройства. Соответственно, ресурс станет *удобен для чтения лишь пользователям смартфонов и планшетов.* 3) **Резиновая** - ширина блока задается в процентах от ширины экрана пользователя. Благодаря этому "резиновые" сайты одинаково хорошо читаются с любых устройств. Тем не менее, адаптивная верстка, равно как и отзывчивая, постепенно вытесняет резиновую. 4) **Отзывчивая** - напоминает адаптивную верстку, но в то же время принципиально отличается от нее. Отличие заключается в действиях на брейк-поинтах. Если в адаптивном варианте браузер резко меняет сверстанный макет, то в отзывчивом происходит плавное изменение верстки между точками слома с максимальным сохранением стабильного вида страницы. Фактически данный подход сочетает в себе признаки адаптивности и "резиновости". +5) **Адаптивная** - Основные параметры сайта подстраиваются под характеристики пользовательского устройства. Ресурс в результате должен удобно читаться практически с любого гаджета или компьютера. Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах. @@ -37,6 +38,18 @@ aliases: - **Mobile First:** Сначала стили для мобильных, затем `min-width`. - **Desktop First:** Сначала для десктопов, затем `max-width`. +```css +/* Различается и ориентация макета */ +@media (orientation: landscape) { + /* При горизонтальной ориентации фоновым цветом сайта будет белый */ + body { + background: #FFF; + } +} +/* Ещё существует portrait - вертикальная */ + +``` + --- # Flexbox (Flexible Box Layout)