Введение в адаптивный дизайн - помощь Webflow
Узнайте, как перетекание контента, фиксированные размеры, относительные размеры и точки останова (медиа-запросы) помогают создать адаптивный дизайн.
Когда вы посещаете сайт на своем мобильном устройстве, вы можете увидеть версию сайта для настольных компьютеров, сжатую на меньшем экране, что заставляет вас увеличивать и перемещать изображение, чтобы увидеть любой контент. Вы также можете попасть на упрощенную мобильную версию, в которой отсутствует контент и опыт, делающие версию для настольных компьютеров превосходной. Надеемся, что вы увидите адаптивный сайт — дизайн, который изменяет и перемещает контент в зависимости от ширины браузера.
Существует три различных аспекта адаптивного дизайна, которые мы рассмотрим здесь:
- Перетекание контента
- Фиксированные размеры
- Относительные размеры
- Точки останова (медиа-запросы)
Перетекание контента
Перетекание контента относится к контенту, который изменяет свою ширину в зависимости от ширины окна браузера. Например, абзац с настройками по умолчанию автоматически переносит свой контент, когда ширина браузера уменьшается. Это поведение можно имитировать, перетаскивая край холста Дизайнера.
Фиксированные размеры
Относительные размеры
Это относится к установке размера элемента относительно других вещей, таких как ширина браузера или родительский элемент. Например, вместо использования пиксельного размера для изображения, рассмотрите возможность использования других единиц, таких как %, VW (ширина окна просмотра) или VH (высота окна просмотра). Если вы используете % на изображении и изменяете ширину браузера, вы увидите, что оно будет адаптироваться соответственно, в то время как изображение на основе пикселей не будет.
Точки останова
Макеты обычно гораздо сложнее, чем управление шириной одного изображения. Использование точек останова (также известных как медиа-запросы) позволяет не только тестировать перераспределение контента, но и изменять дизайн и макет в зависимости от различных диапазонов ширины устройства.
Узнать больше: