Големини и rem

Rem

Webflow по подразбирање е во px единици. Ако внесеме „10“ во кој било влез на Дизајнерот и притиснете „Enter“, ќе поставите „10px“.

Client-First користи rem, што можеме да го избереме во паѓачкото мени на единицата.

Што е rem?

Rem значи "root em" или "суштински em".

• Rem е релативна мерна единица базирана на ^font-size од суштинскиот елемент.
• Суштинскиот елемент е ^html.
• Rem е релативен на ^html големина на фонтот.
• Повеќето големини нанесени во Client-First се во rem.

Наследување на големината на фонтот на прелистувачот

Во Client-First ја наследуваме ^{html font-size} од прелистувачот.

Прелистувачите почетно користат 16px како нивна основна ^{html font-size}.

1rem = 16px конверзија од основната вредност од прелистувачот. ж

Базирано од одобрените големини на Client-First, можеме да направиме брза конверзија од px во rem. На пример, одобрените rem вредност на Client-First се 0.5, 1, 1.5, 2, 2.5, 3, итн.

Rem и Client-First се моќен пар за следење на најдобрите пракси за пристапност со големината на фонтот од прелистувачот.

Математиката

Секои 16px се 1rem кога ^font-size од прелистувачот е наместен на "default(основно)" во неговите поставки.

Кога го градиме нашиот Webflow проект, секогаш користеме 16px како наша базична вредност за калкулирање rem.

Секоја rem мерна конверзија се помножува со 16.

За да се конвертира px вредноста во rem поделете ја оваа вредност со 16.

64px / 16px = 4rem

За да се конвертира rem вредноста во px помножете ја оваа вредност со 16.

2rem x 16px = 32px

За погодност, предлагаме да користите лесно читливи rem вредности како 1, 2, 2,5, 3, 4, 5.

Сакаме да избегнеме доследна употреба на долги броеви вредности како 8,4375rem. Овие вредности се потешки за запомнување и ќе не успорат во нашиот работен тек.

Калкулации во Webflow Designer

Во повеќето влезни единици на Webflow Designer, можеме да го пресметаме rem природно во Webflow.

Во внатрешноста на внесувањето на ширината на Дизајнер, внесете "100/16rem", притиснете "Enter" и видете ја пресметана вредност на rem.

Можеме да го поделиме било кој број со 16 за да ја добиеме неговата rem вредност во Webflow Designer.

Придобивки од пристапност

Поставки за големината на фонтот на прелистувачот

Прелистувачите користат 16 пиксели како нивната стандардна^html големина на фонт и прелистувачите му овозможуваат на корисникот да ја ажурира стандардната големина на фонтот. Корисниците можат да ги ажурираат своите преференции и да ги променат поставките за големина на фонтот.

Поставките за големината на фонтот на прелистувачот се суштинска тема за пристапност. Кога корисниците го ажурираат фонтот на својот прелистувач, содржината на веб-страницата треба да се прилагоди со промената. Client-First rem системот се прилагодува на поставките за големината на фонтот на прелистувачот на корисникот.

‍

Кога работиме со други мерни единици, како px и vw, ги игнорираме преференциите на корисникот за да ги ажурираме поставките за големината на фонтот на нивниот прелистувач.

Browser zoom

Rem исто така ги почитува контролите за зумирање на прелистувачот на корисникот. Кога корисникот зумира или одзумира на страницата, нашиот распоред и содржината во rem ќе зумира заедно со корисникот.

Кога користиме единици vw или vh, зумирањето на прелистувачот нема да работи.

‍vw се потпира на ширината на приказот на прелистувачот (или висината во случај на vh). Само промената во прозорецот на прелистувачот ќе влијае на големини поставени во тие единици.

Client-First ги следи најдобрите практики за пристапност. Одлуката да се работи во rem е директно поврзана со оваа придобивка за пристапност и UX.

Дознајте повеќе за пристапноста со користење на rem во нашата Wizardry vs. Client-First comparison статија. Ова е технички преглед на придобивките од rem како достапна мерна единица.

Препорачани вредности од px до rem

Подолу е листа на сите препорачани rem вредности со нивното конвертирано px мерење.

Овие вредности одобрени од Client-First се препорака, а не строг услов.

Оваа листа на големини е интерактивна. Ажурирајте ги вредностите преку лепливото мени за навигација.

‍

{{Тука ќе го додадеме калкулаторот px-rem}}

‍

Client-First предлага да се работи со овие вредности.

Постојат 3 исклучоци за користење на горенаведените вредности.

1. Типографија

Користењето 14px за големина на фонтот е вообичаено и се препорачува кога 16px е преголема. Големината на фонтот од 12px често е премногу мала за типографија.

14px = 0.875rem

2. 2px растојание

Користете 2px за ситно растојание. Ако е потребна вредност за растојание помало од 4px, користете 2px.‍

2px = 0.125rem

3. 1px е 1px

Кога користите 1px, на пример како CSS ^border, користете 1px како вредност.

Не препорачуваме да ги конвертирате вредностите од 1px во rem.

Уредите со ретина имаат различни правила за скалирање од уредите без ретина. Користењето на 1px ќе создаде точно 1px линија на било кој уред без мешање на скалирање на ретината.‍

1px = 1px

Finsweet Extension px to rem алатка за миграција

Finsweet Extension нуди алатка за конвертирање на проекти креирани во px во rem.

Ќе ја конвертира секоја вредност во проектот од px во неговата пресметана rem вредност.

Во Client-First табот од Finsweet Extension, "PX до REM Мигратор-от" candy ќе управува со миграцијата на единица големина.