Динамическая адаптивность
Инструменты
Есть два варианта для создания нашего сайта Client-First в Webflow с динамической адаптивностью:
- Визуальный генератор кода в расширении Finsweet
- Упрощенный генератор кода (неофициальная версия)
Что такое динамическая адаптивность?
Когда размер окна браузера изменяется, дизайн масштабируется вместе с ним.
Динамическая адаптивность Client-First в сравнении с масштабированием vw и vh
Когда размер окна браузера изменяется, дизайн масштабируется вместе с ним.
Использование vw или vh - это один из способов сделать наш контент динамически адаптивным при масштабировании. Какие сложности при использовании такого способа:
- Мы должны задать размеры в единицах vw или vh на каждом элементе, который мы хотим сделать динамически адаптивным.
- Элементы могут быстро стать слишком мелкими или слишком большими из-за линейного масштабирования, так как vw или vh масштабируются линейно.
- Веб-доступность страдает, потому что изменение настроек браузера не может повлиять на единицы vw или vh.
- Управление и поддержка проекта Webflow, созданного на vw или vh, может быть сложной, особенно для других разработчиков и клиентов.
Client-First использует "масштабирование корневого шрифта".
Масштабирование корневого шрифта
Система Client-First повсеместно использует единицы rem. Единица rem основана на одном значении - размере корневого шрифта HTML (root font).
Все в нашем проекте зависит от размера шрифта HTML. Благодаря этому у нас есть глобальное управление размерами в проекте.
Изменяя размер корневого шрифта, мы влияем на отображение rem и размеры становятся "больше" или "меньше" визуально. Наш генератор визуальной динамической адаптивности работает на обширном наборе вычислений, которые изменяют размер корневого шрифта в соответствии с нашими предпочтениями.
Добавление специального CSS кода заставляет наш проект Webflow следовать новым правилам масштабирования. Изменение размера корневого шрифта HTML на различных разрешениях позволяет нам гибко настраивать динамическую адаптивность.
Преимущества:
- Используйте Client-First как обычно. Нет каких-либо изменений в рабочем процессе для сайтов с динамической адаптивностью и без нее.
- Стратегия динамической адаптивности является дополнительной опцией. Используйте ее по своему желанию.
- Динамическая адаптивность может быть добавлена в финальной стадии разработки проекта, после того как все сверстано.
- Масштабирование в браузерах работает как обычно.
- Настройки размера корневого шрифта браузера, сделанные конечными пользователями, будут корректно обрабатываться.
- Поддержка проекта Webflow в rem проще, чем проекта с фиксированным размером на основе vw или vh.
Визуальное создание динамической адаптивности
- Визуально настройте правила масштабирования для динамической адаптивности.
- Скопируйте CSS код в проект Client-First Webflow.
- Наслаждайтесь сайтом с динамической адаптивностью в rem.
Визуальный генератор кода в расширении Finsweet
В оригинальной документации Client-First используется генератор Fluid Design Generator, доступный в расширении Finsweet Extension.
Расширение можно установить из Webflow App Marketplace или на сайте Finsweet.
После установки генератор доступен прямо внутри Webflow / Apps.
Объяснение в прямом эфире
Живые уроки #5
Живые уроки #8
Упрощенный генератор динамической адаптивности
Примечание переводчика: Мы решили добавить на эту страницу упрощённый генератор, который используем в своей работе. Он позволяет быстро настроить масштабирование базового размера шрифта и получить готовый CSS-код для проекта.
Принцип работы соответствует методике Client-First, однако сам генератор не является частью официальной документации.
Оригинальный инструмент доступен в расширении Finsweet Extension.