Rem
Webflow domyślnie korzysta z jednostek w pikselach (px). Jeśli wpiszemy "10" do dowolnego pola w Webflow Designerze i naciśniemy "Enter", ustawi on "10px".
Client-First używa rem, które możemy wybrać w dropdownie wyboru jednostek wielkości.
What is rem?
Rem to skrót od "root em".
- Rem jest relatywną jednostką wielkości opartą na font-size głównego elementu.
- Elementem głównym jest html.
- Rem jest relatywne w stosunku html font size.
- Większość rozmiarów stosowanych w Client-First jest w rem.
Dziedziczenie wielkości fontu w przeglądarce
W Client-First dziedziczymy html font-size po font-size przeglądarki.
Przeglądarki domyślnie używają 16px jako domyślny html font-size.
Konwersja 1rem = 16px jest domyślna dla przeglądarki.
Na podstawie zatwierdzonych przez Client-First wymiarów możemy dokonać szybkiej konwersji px na rem. Na przykład, zatwierdzone przez Client-First wartości rem to 0.5, 1, 1.5, 2, 2.5, 3, itd.
Rem i Client-First to potężna para do przestrzegania najlepszych praktyk dostępności z wielkością fontu przeglądarki
Matematyka
Każde 16px to 1rem gdy font-size przeglądarki jest ustawiony na "domyślny" w ustawieniach przeglądarki.
Kiedy budujemy nasz projekt w Webflow, zawsze używamy 16px jako naszej wartości bazowej do obliczania rem.
Każde przeliczenie pomiaru rem jest wielokrotnością 16.
Aby przeliczyć wartość z px na rem podziel tę wartość przez 16.
64px / 16px = 4rem
Aby przeliczyć wartość z rem na px pomnóż tę wartość przez 16.
2rem x 16px = 32px
Dla wygody sugerujemy używanie łatwo czytelnych wartości rem, takich jak 1, 2, 2.5, 3, 4, 5.
Chcemy uniknąć konsekwentnego używania długich wartości liczbowych, takich jak 8,4375rem. Te wartości są trudniejsze do zapamiętania i spowolnią nas w efektywnej pracy.
Obliczenia w Webflow Designerze
Wewnątrz większości pól w Webflow Designerze, możemy obliczyć rem natywnie w Webflow.
Wewnątrz pola “width” w Designerze, wpisz "100/16rem", naciśnij "Enter" i zobacz obliczoną wartość rem.
Możemy podzielić dowolną liczbę przez 16, aby uzyskać jej wartość rem wewnątrz Webflow Designera.
Korzyści ze względu na dostępność
Ustawienia wielkości fontu w przeglądarce
Przeglądarki używają 16px jako domyślnego html font size . Przeglądarki pozwalają użytkownikowi na aktualizację domyślnej wielkości fontu. Użytkownicy mogą zaktualizować swoje preferencje i zmienić ustawienia wielkości fontu.
Ustawienia rozmiaru fontu w przeglądarce to istotny temat związany z dostępnością. Gdy użytkownicy aktualizują font w przeglądarce, strona internetowa powinna dostosować się do tej zmiany. System Client-First rem dostosowuje się do ustawień wielkości fontu przeglądarki użytkownika.
Kiedy pracujemy w innych jednostkach miary, takich jak px i vw, ignorujemy preferencje użytkownika, aby zaktualizować ustawienia rozmiaru czcionki w przeglądarce.
Powiększenie (zoom) przeglądarki
Rem respektuje również kontrolę powiększenia przeglądarki użytkownika. Kiedy użytkownik powiększa lub pomniejsza stronę, nasz układ i elementy w rem powiększają się razem z nią.
Gdy używamy jednostek vw lub vh, zoom przeglądarki nie będzie działał.
vw opiera się na szerokości viewportu (lub wysokości w przypadku vh). Tylko zmiana w oknie przeglądarki wpłynie na rozmiary ustawione w tych jednostkach.
Client-First stosuje najlepsze praktyki dostępności. Decyzja o pracy w rem jest bezpośrednio związana z tą dostępnością i korzyścią UX.
Dowiedz się więcej o dostępności przy użyciu rem w naszym artykule porównawczym Wizardry vs Client-First. Jest to techniczny przegląd zalet rem jako dostępnej jednostki miary.
Client-First zaleca pracę z podanymi wyżej jednostkami.
Client First zakłada 3 wyjątki kiedy warto odejść od rekomendowanych wartości px do rem.
1. Typografia
Używanie 14px dla wielkości fontu jest powszechne i zalecane, gdy 16px jest zbyt duże. 12px font-size jest często zbyt mały dla typografii.
14px = 0.875rem
2. Odstęp 2px
Użyj 2px dla małych odstępów. Jeśli potrzebna jest wartość odstępu mniejsza niż 4px, użyj 2px.
2px = 0.125rem
3. 1px to 1px
Podczas używania 1px, na przykład dla CSS border, użyj 1px jako wartości.
Nie zalecamy konwersji wartości 1px na rem.
Urządzenia Retina mają inne zasady skalowania niż urządzenia nieretinowe. Używanie 1px utworzy dokładnie 1px linię na dowolnym urządzeniu bez ingerencji w skalowanie retiny.
1px = 1px
Narzędzie do migracji px do rem w ramach Finsweet Extension
Finsweet Extension oferuje narzędzie do konwersji projektów stworzonych w px na rem.
Narzędzie to przekształci każdą wartość w projekcie z px na jej obliczoną wartość rem.
Wewnątrz zakładki Client-First w Finsweet Extension, "PX to REM Migrator" candy będzie zarządzać migracją px do rem.