.jpg)
Rem
Webflow използва px по подразбиране. Ако въведем "10" в което и да е поле на Designer и натиснем "Enter", ние ще се зададем значение "10px".
Client-First използва rem, който можем да изберем от падащото меню за единици.
Какво е rem?
Rem означава "коренен (root) 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 на браузъра е зададен на "по подразбиране" в настройките на браузъра.
Когато създаваме нашия 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
Можем да изчислим rem директно в повечето полета за въвеждане на Webflow Designer.
Въведете "100/16rem" в полето за широчина на Designer, натиснете "Enter" и ще видите изчислената стойност на rem.
Можем да разделим всяко число на 16, за да получим неговата rem стойност във Webflow Designer.
Предимства за уеб достъпността
Настройки на размера на шрифта на браузъра
Браузърите използват 16px като своя стандартен размер на html шрифта. Обаче браузърите позволяват на потребителя на променя размера на шрифта, който се използва стандартно.
Настройките на размера на шрифта на браузъра са важни за уеб достъпността. Когато потребителите променят размера на своя браузърски шрифт, съдържанието на уебсайта също така трябва да се промени според промяната. Системата rem на Client-First се адаптира спрямо настройките на размера на шрифта на браузъра на потребителя.
Когато работим с други единици за измерване, като px или vw, ние игнорираме предпочитанията на потребителите, които са променили настройките на своя браузър.
Мащабиране на браузъра
Rem също така взима предвид и мащабирането на браузъра на потребителя. Когато потребителят увеличава или намалява страницата, нашият сайт и съдържанието му в rem също така ще се променят.
Когато използваме единици vw или vh мащабирането на браузъра няма им влияе.
vw се базира на ширината на прозореца на браузъра (или височината в случай на vh). Само промяна на самия прозорец на браузъра ще повлияе на размерите, зададени в тези единици.
Client-First следва най-добрите практики за уеб достъпност. Решението да работим в rem е директно свързано с това предимство за уеб достъпността и UX.
Научете повече за достъпността с използването на rem в нашата статия със сравнение на Wizardry vs. Client-First. Това е технически обзор на предимствата от rem.
Препоръчителни стойности px в rem
По-надолу има списък с всички препоръчителни стойности на rem и техните преобразувани в px.
Тези стойности на Client-First са препоръка, а не строго изискване.
Това е интерактивен списък от размери. В менюто могат да се сложат нужните стойности.
{{We will add the px-rem calculator here}}
Client-First предлага да се работи с тези стойности.
Има 3 изключения при използване на посочените горе стойности.
1. Типография
Използването на 14px за размер на шрифта е общоприето и препоръчително, когато 16px е твърде голям. Размер 12px често е твърде малък за типографията.
14px = 0.875rem
2. Отстояние 2px
Ако е необходимо отстояние по-малко от 4px, използвайте 2px. Използвайте 2px за много малки отстояния.
2px = 0.125rem
3. 1px е равно на 1px
Когато използвате 1px, например като CSS border, използвайте стойността 1px.
Не препоръчваме да преобразувате 1px в rem.
Устройствата с Retina имат по-различни правила за мащабиране от тези без Retina. Използването на 1px ще създаде точно 1px линия на всяко устройство без намеса на мащабирането на Retina.
1px = 1px
Инструмент за миграция от px до rem във Finsweet Extension
Finsweet Extension предлага инструмент за преобразуване в rem на проекти, създадени в px.
Този инструмент преобразува всяка стойност в проекта от px в изчислена rem стойност.
Можете да намерите този инструмент в раздела Client-First на разширението Finsweet, функция "PX to REM Migrator".