vault backup: 2026-06-07 18:08:08
This commit is contained in:
@@ -8,7 +8,7 @@ tags:
|
|||||||
- adaptive-design
|
- adaptive-design
|
||||||
- responsive-web
|
- responsive-web
|
||||||
created: 2026-05-30
|
created: 2026-05-30
|
||||||
updated: 2026-06-05
|
updated: 2026-06-07
|
||||||
source:
|
source:
|
||||||
- '[[14-css-adaptive.pdf]]'
|
- '[[14-css-adaptive.pdf]]'
|
||||||
- '[[17-css-grid.pdf]]'
|
- '[[17-css-grid.pdf]]'
|
||||||
@@ -16,8 +16,15 @@ source:
|
|||||||
aliases:
|
aliases:
|
||||||
- 'CSS: Адаптивность, Flexbox и Grid'
|
- 'CSS: Адаптивность, Flexbox и Grid'
|
||||||
---
|
---
|
||||||
|
|
||||||
# Адаптивная верстка
|
# Адаптивная верстка
|
||||||
|
|
||||||
|
## Виды верстки
|
||||||
|
1) **Фиксированная** - макет разрабатывается с фиксированными параметрами (например, с точным указанием размеров в пикселях). Такой подход *устарел* и применяется редко.
|
||||||
|
2) **Мобильная** - сайт создается на выделенном поддомене и адаптируется только под мобильные устройства. Соответственно, ресурс станет *удобен для чтения лишь пользователям смартфонов и планшетов.*
|
||||||
|
3) **Резиновая** - ширина блока задается в процентах от ширины экрана пользователя. Благодаря этому "резиновые" сайты одинаково хорошо читаются с любых устройств. Тем не менее, адаптивная верстка, равно как и отзывчивая, постепенно вытесняет резиновую.
|
||||||
|
4) **Отзывчивая** - напоминает адаптивную верстку, но в то же время принципиально отличается от нее. Отличие заключается в действиях на брейк-поинтах. Если в адаптивном варианте браузер резко меняет сверстанный макет, то в отзывчивом происходит плавное изменение верстки между точками слома с максимальным сохранением стабильного вида страницы. Фактически данный подход сочетает в себе признаки адаптивности и "резиновости".
|
||||||
|
|
||||||
Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.
|
Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.
|
||||||
|
|
||||||
## Медиазапросы (@media)
|
## Медиазапросы (@media)
|
||||||
|
|||||||
Reference in New Issue
Block a user