.jpg)
Инструменти
Два варианта за правене на нашия сайт на Client-First в Webflow с динамична адаптивност:
- Визуален конфигуратор на CSS на тази страница
- Същият визуален конфигуратор в Finsweet Extension
Какво е динамична адаптивност?
Когато размерът на прозореца на браузъра се променя, дизайнът се мащабира заедно с него.
Динамична адаптивност на 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 единици.