Течно респонзивен

Додадете течно-респонзивен на било кои Client-First проекти користејќи визуелна алатка за течно скалирање. Без пресметки, без пишување на прилагодлив CSS, без JavaScript.

Алатки

Две опции за да го направиме нашиот Client-First Webflow сајт течно-респонзивен

  1. Визуелниот CSS фрагмент конфигуратор на оваа страна
  2. Истиот визуелен конфигуратор во 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 базирана големина.

Визуелно градете течна-респонзивност

  1. Визуелно конфигурирајте ги правилата за скалирање на течна-респонзивност.
  2. Копирајте го CSS кодот во Client-First Webflow проектот.
  3. Уживајте во течно-респонзивен сајт во rems.
следно

Семантички HTML ознаки

Научете како да користите и најдобро да воспоставите семантички HTML ознаки во Webflow.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reset
HTML font size
px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
px values
rem values
2px
=
0.125rem

Closest to Client-First values

2px
=
0.125rem

Neighboring values

2px
=
0.125rem