diff --git a/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md b/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md index 8663949..3964ca4 100644 --- a/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md +++ b/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md @@ -8,7 +8,7 @@ tags: - adaptive-design - responsive-web created: 2026-05-30 -updated: 2026-06-05 +updated: 2026-06-07 source: - '[[14-css-adaptive.pdf]]' - '[[17-css-grid.pdf]]' @@ -16,8 +16,15 @@ source: aliases: - 'CSS: Адаптивность, Flexbox и Grid' --- + # Адаптивная верстка +## Виды верстки +1) **Фиксированная** - макет разрабатывается с фиксированными параметрами (например, с точным указанием размеров в пикселях). Такой подход *устарел* и применяется редко. +2) **Мобильная** - сайт создается на выделенном поддомене и адаптируется только под мобильные устройства. Соответственно, ресурс станет *удобен для чтения лишь пользователям смартфонов и планшетов.* +3) **Резиновая** - ширина блока задается в процентах от ширины экрана пользователя. Благодаря этому "резиновые" сайты одинаково хорошо читаются с любых устройств. Тем не менее, адаптивная верстка, равно как и отзывчивая, постепенно вытесняет резиновую. +4) **Отзывчивая** - напоминает адаптивную верстку, но в то же время принципиально отличается от нее. Отличие заключается в действиях на брейк-поинтах. Если в адаптивном варианте браузер резко меняет сверстанный макет, то в отзывчивом происходит плавное изменение верстки между точками слома с максимальным сохранением стабильного вида страницы. Фактически данный подход сочетает в себе признаки адаптивности и "резиновости". + Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах. ## Медиазапросы (@media)