Client-First for Webflow
Течно респонзивен
Додадете течно-респонзивен на било кои Client-First проекти користејќи визуелна алатка за течно скалирање. Без пресметки, без пишување на прилагодлив CSS, без JavaScript.
Алатки
Две опции за да го направиме нашиот Client-First Webflow сајт течно-респонзивен
- Визуелниот CSS фрагмент конфигуратор на оваа страна
- Истиот визуелен конфигуратор во Finsweet Extension
Што е течно-респонзивен?
Како што приказот на прелистувачот ја менува големината, дизајнот се зголемува со него.
Client-First течно-респонзивен во споредба со vw и vh скалирање
Како што приказот на прелистувачот ја менува големината, дизајнот се зголемува со него.
Користењето на vw или vh единиците е еден начин да се направи нашата содржина течно-респонзивни при скалирање. Проблемите со овој метод се:
- Мораме да поставиме vw или vh големини на единица на секој елемент што сакаме да биде течно-респонзивен.
- Елементите може брзо да станат премали или преголеми поради линеарно скалирање. vw и vh скалираат линеарно.
- Пристапноста страда бидејќи зумирањето на прелистувачот не може да влијае и на vw и на vh единици.
- Може да биде предизвик да се управува и одржува нашиот проект Webflow во vw и vh, особено за други девелопери и клиенти.
Наместо тоа, Client-First користи "root-font скалирање".
Root-font скалирање
Client-First системот користи rem единици за сите големини. rem единицата се заснова на една работа — големината на коренот на HTML фонтот.
Сè во нашиот проект е релативно во однос на големината на HTML фонтот. Поради ова, имаме глобално управувана контрола врз сите големини во нашиот проект.
Со модифицирање на оваа големина, ние ефективно ги правиме нашите rems визуелно "поголеми" или "помали". Нашиот генератор за визуелно течна респонзивност работи на широк сет на пресметки кои ја менуваат големината на коренскиот фонт според нашите преференции.
Adding the generated CSS code makes our Webflow project follow custom size scaling rules. Changing the HTML font size across breakpoints gives us ultimate customization of our fluid responsive scaling. Додавањето на генерираниот CSS-код го прави нашиот Webflow проект да ги следи правилата за скалирање на прилагодлива големина. Промената на големината на HTML фонтот низ точките на прекин ни дава врвно прилагодување на нашето течно-респонзивно скалирање.
Придобивки:
- Користете го Client-First како што обично го користите. Нема специфична промена на работниот тек за течно-респонзивни сајти наспроти не течно-респонзивни сајти.
- Стратегијата течно-респонзивен е опционален додаток. Додадете го или не додавајте го на било кој проект.
- Течно-респонзивен може да се додаде на крајот на проектот откако сѐ ќе биде развиено.
- Прелистувачите можат нормално да зумираат.
- Ќе се почитуваат поставките за големината на фонтот на прелистувачот што се модифицирани од крајните корисници.
- Одржувањето на Webflow проект во rem е полесно од проект со фиксна vw или vh базирана големина.
Визуелно градете течна-респонзивност
- Визуелно конфигурирајте ги правилата за скалирање на течна-респонзивност.
- Копирајте го CSS кодот во Client-First Webflow проектот.
- Уживајте во течно-респонзивен сајт во rems.