Różnica między absolutnymi i względnymi jednostkami CSS

Wybór właściwych jednostek CSS jest czymś więcej niż szczegółem technicznym. To pomaga Twojemu projektowi pozostać spójne, elastyczne i reagują na wszystkich urządzeniach. Pixels mogą wydawać się łatwą opcją, ale nie zawsze zachowują się przewidywalnie na różnych ekranach.

W tym poście wyjaśnimy różnicę między jednostkami absolutnymi i względnymi i pokażemy, w jaki sposób Divi 5 pomaga wykorzystać je skuteczniej od samego początku.

Wyjaśnione jednostki CSS: Dlaczego mają one znaczenie dla Twojej witryny?

Jednostki CSS kontrolują, jak duży wszystko pojawia się w Twojej witrynie. Wybierz źle, a Twój projekt pęka na różnych urządzeniach.

Większość ludzi używa pikseli, ponieważ są proste i łatwe do zrozumienia. Ale piksele naturalnie nie dostosowują się dobrze do responsywnego projektowania. Wymagają zapytań medialnych lub funkcji CSS, takich jak Clamp (), aby odpowiedzieć na zmiany ekranu.

Inne jednostki dostosowują się automatycznie. Jednostki rzutni skalują z oknem przeglądarki. Względne jednostki, takie jak rozmiar EM, oparte są na otaczającym tekście. Różne jednostki rozwiązują różne problemy. Wybierz dobrze, a projekt dostosowuje się do urządzeń bez dodatkowej pracy.

Rozbijanie jednostek absolutnych: gdy stałe rozmiary działają najlepiej

Absolutne jednostki utrzymują ten sam rozmiar bez względu na to, co się wokół nich dzieje. Jeśli ustawisz coś na szerokości 20 pikseli, pozostaje 20 pikseli, niezależnie od tego, czy ktoś ogląda to na telefonie, czy masywny monitor komputerów stacjonarnych. Wartość nigdy nie zmienia się na podstawie rozmiaru ekranu, elementów nadrzędnych lub ustawień przeglądarki.

Pixels (PX) rządzi tę przestrzeń. Istnieją inne absolutne jednostki, takie jak centymetry, milimetry i cale, ale należą one do projektu druku, w którym pomiary fizyczne mają znaczenie. Do projektowania stron internetowych piksele obsługują prawie każdy bezwzględny pomiar, którego potrzebujesz.

Dlaczego piksele świetnie działają na małe szczegóły

Niektóre elementy projektowe wymagają dokładnej kontroli. 1-pikselowa granica powinna wyglądać wszędzie chrupiące i cienkie. Shad Shadows potrzebuje precyzji, aby wyglądać dobrze. Małe ikony działają lepiej, gdy pozostają spójne na wszystkich urządzeniach.

Piksele działają doskonale dla tych drobnych szczegółów. Granica przycisku powinna mieć dokładnie 2 piksele grubości, który subtelny cień powinien być dokładnie 4 pikseli, a ikona nawigacji powinna być dokładnie 24 pikseli kwadratowy, aby uzyskać idealne wyrównanie.

Te pomiary nie muszą skalować się z rozmiarem ekranu. Granica 1 piksela na komputerze powinna pozostać 1 piksel na telefonie komórkowym. Wykonanie 2 pikseli na urządzeniach mobilnych wyglądałoby grubo i niezgrabnie.

Inne elementy działają również z pikselami. Logo marki często używają pikseli do spójności marki. Małe elementy dekoracyjne, takie jak kropki lub linie, wymagają dokładnej wielkości. Ładowanie spinnerów i słupków postępowych działają lepiej z ustalonymi wymiarami.

Sprawiając, że piksele reagują na zapytania medialne

Piksele nie są całkowicie sztywne. Zapytania o media umożliwiają zamianę różnych wartości pikseli na różne rozmiary ekranu. Twój nagłówek może użyć 32-pikselowego tekstu na komputerze, a następnie przeskakiwać do 28 pikseli na tabletach i 24 na telefonach.

Takie podejście ma więcej pracy niż jednostki względne. Musisz zdefiniować punkty przerwania i napisać osobne reguły dla każdego rozmiaru ekranu, ale masz całkowitą kontrolę nad tym, jak sprawy wyglądają na każdy rozmiar.

Takie podejście działa dobrze, gdy chcesz określić kontrolę w każdym rozmiarze ekranu. Dokładnie decydujesz, jak wygląda Twój tekst na telefonach w porównaniu z tabletami w porównaniu z komputerami stacjonarnymi w określonych wymiarach. Żadnych niespodzianek.

Dodatkowe CSS jest tego warte dla elementów wymagających precyzyjnego rozmiaru. Logo wyglądają najlepiej, gdy pozostają dokładnie odpowiedni dla każdego urządzenia. Elementy nawigacyjne często potrzebują określonych wymiarów, aby działać poprawnie. Granice dekoracyjne i cienie zależą od dokładnych pomiarów, aby wyglądać wyraźnie.

Zrozumienie jednostek względnych: elastyczne podejście do projektowania stron internetowych

Natomiast jednostki względne rozciągają się i kurczą na podstawie tego, co jest wokół nich. Ta elastyczność sprawia, że strony internetowe działają w telefonach, tabletach i komputerach bez łamania. W przeciwieństwie do absolutnych jednostek, które pozostają naprawione, jednostki względne dostosowują się do wielkości ekranu, elementów nadrzędnych lub preferencji użytkownika.

Jednostki te rozwiązują problemy, które tworzą piksele. Twój 75-pikselowy przycisk działa dobrze na pulpicie, ale staje się dominujący na urządzeniach mobilnych. Jednostki względne automatycznie dostosowują, oszczędzając od pisania osobnych stylów dla każdego rozmiaru ekranu.

Jak budują się na sobie jednostki EM

Jednostki EM są w stosunku do wielkości czcionki swojego bezpośredniego elementu nadrzędnego. Jeśli rozmiar czcionki bazowej wynosi 16px, a ty ustawiasz pojemnik na rozmiar czcionki: 1.25EM, staje się to 20px. Element dziecięcy w nim ustawiony na 1,5em będzie teraz 30px (1,5 × 20px), a nie 24px, ponieważ jest oparty na rodzica, a nie na korzeniu.

Ten efekt złożony jest silny dla skalowalnych odstępów wokół tekstu. Ale jeśli będziesz gniazdować elementy z rozmiarami czcionek opartych na EM, twoje wartości mogą szybko zwiększyć rozmiar. Jednostki EM najlepiej działają na wyściółkę, margines lub elementy ściśle związane z pobliskim tekstem. Aby uzyskać spójne rozmiary w całym układzie, rozważ użycie REM zamiast tego.

Jednostki REM są proste

REM zawsze patrzy na główny element HTML. Ustaw coś na 2rem i jest to ten sam rozmiar wszędzie na Twojej stronie.

Większość przeglądarek domyślnie 16px dla korzenia. Więc 1rem = 16px, 2rem = 32px. Zmień rozmiar korzenia i wszystko oparte na REM skaluje się razem.

Jednostki rzutni śledzą ekran

Jednostki rzutni skalują się z oknem przeglądarki. 50VW = połowa szerokości ekranu i 100 VH = pełny ekran wysokości. Jest to świetne dla sekcji bohaterów, które wypełniają ekran.

Przeglądarki mobilne zwykle nie grają dobrze z jednostkami rzutni. Pasek adresu ukrywa się i pokazuje, gdy przewijasz, a sekcja 100 VH może zostać odcięta, gdy pojawi się pasek adresu.

VMIN i Vmax porównaj szerokość i wysokość ekranu, a następnie wybierz jeden. VMIN używa w zależności od tego, co jest mniejsze. Na telefonie przytrzymywanym w pozycji szerokość jest mniejsza, więc 50Vmin = 50% szerokości. Obróć się do krajobrazu, a wysokość staje się mniejsza, więc 50 Vmin przełącza się na 50% wysokości. Vmax robi coś przeciwnego: zawsze wybiera większy wymiar. Jest to przydatne w przypadku elementów, które muszą skalować się z większym pomiarem.

Procenty dostosowują się do kontenerów

Procentowe szerokości zawsze odnoszą się do szerokości elementu nadrzędnego. Procent wysokości może skalować w ten sam sposób, ale tylko wtedy, gdy rodzic ma określoną wysokość; W przeciwnym razie nie mogą działać zgodnie z oczekiwaniami.

Procent wyściółki i marginesu są zawsze obliczane na podstawie szerokości rodzica, nawet dla wartości górnych i dolnych. Umożliwia to tworzenie spójnych odstępów i proporcjonalnych układów, szczególnie w projektach płynów.

Różnica

Jednostki absolutne są jak sztywny władca, podczas gdy jednostki względne zachowują się bardziej jak taśma pomiarowa. Oba mierzą rzeczy, ale reagują zupełnie inaczej, gdy zmieniają się warunki. Oto jak się porównują:

Większość programistów używa obu: pikseli dla małych rzeczy, które muszą pozostać chrupiące i względne jednostki dla dużych elementów strukturalnych, które muszą się zgiąć.

Wybór odpowiednich jednostek do twojego projektu

Różne części Twojej witryny wymagają różnych podejść. Niektóre elementy pozostają wszędzie tego samego rozmiaru, podczas gdy inne dostosowują się na podstawie rozmiaru ekranu lub ustawień użytkownika. Większość programistów to przemyśla. Jest prosty sposób: dopasuj urządzenie do tego, co chcesz zrobić.

Pomyśl najpierw o swoich użytkownikach

Ludzie przeglądają twoją stronę w nieoczekiwany sposób. Ktoś odwiedza ich telefon. Twój tekst wygląda na małe, więc szczypią się, aby powiększyć. Jeśli zbudowałeś jednostki REM, wszystko rośnie proporcjonalnie. Jeśli używałeś pikseli wszędzie, wszystko zacznie się nakładać i łamać.

Główna nawigacja wymaga spójnego rozmiaru na stronach. Jednostki REM wiążą go z podstawową rozmiarem czcionki. Twoje logo wymaga dokładnych wymiarów spójności marki. Piksele utrzymują to chrupiące.

Wielu użytkowników zmienia domyślny rozmiar czcionki przeglądarki, aby uzyskać lepszą czytelność. Kiedy piksele kodu twarde ignorujesz ich preferencje. Jeśli ktoś powiększa do 125%, układ oparty na pikselach rozpada się. Jednostki względne dostosowują się automatycznie.

Szybkie sposoby wyboru odpowiedniego urządzenia

Oto jak podzielić swoje wybory bez gubiania się w szczegółach:

• Tekst i odstępy wokół niego: Użyj ich lub REM. Skale wyściółki z rozmiarem tekstu. Margines pozostają proporcjonalne do nagłówków.
• Elementy związane z ekranem: Użyj jednostek rzutni. Sekcje bohaterów, które wypełniają większość ekranów. Paski boczne, które przyjmują określone wartości procentowe ekranu.
• Elementy wymagające dokładnej kontroli: Użyj pikseli. Cienkie granice, które pozostają wyraźne. Małe ikony z doskonałym wyrównaniem. Upuść cienie z precyzyjnymi przesunięciami.
• Elementy oparte na kontenerze: Procenty używania. Elastyczne siatki, które dostosowują się do rodziców. Obrazy, które skali z pojemnikami.

Zacznij prosto. Używaj pikseli do bitów dekoracyjnych, REM do tekstu i powiązanych odstępów, jednostek rzutni dla sekcji wielkości ekranu i wartości procentowych dla elastycznych pojemników. Wybierz system powiązanych elementów i trzymaj się go.

Typowe błędy jednostki CSS, których należy unikać

Wybierasz piksele na wszystko, ponieważ czują się bezpiecznie. Twój przycisk wygląda idealnie o szerokości 75 pikseli na laptopie. Następnie ktoś otwiera twoją stronę na telefonie, a ten sam przycisk je połowę ekranu. Twoje logo wymaga dokładnych wymiarów, ale obszary treści wymagają elastyczności. Losowo wymieszaj te podejścia, a tworzysz chaos. Oto kilka wskazówek dotyczących unikania standardowych błędów jednostek CSS:

1. Zbieranie pikseli do wszystkiego

Pikse są bezpieczne, ponieważ 20 pikseli oznacza 20 pikseli. Proste, prawda? Twój 300-pikselowy pasek boczny działa dobrze na komputerze. Na telefonie komórkowym staje się ogromnym blokiem, który miażdży Twoją zawartość w cienki pasek. Twój 16-pikselowy tekst staje się nieczytelny na ekranach o dużej gęstości.

Kiedy ktoś zwiększa rozmiar czcionki przeglądarki, układ oparty na pikselach nie dostosowuje się. Tekst przepełnia kontenery. Przyciski znikają za innymi elementami. Twój pasek boczny ulega awarii głównej treści.

Zapisz piksele na rzeczy, które naprawdę wymagają dokładnej kontroli: cienkie granice, małe ikony i cienie. W przypadku wszystkiego innego staraj się używać względnych jednostek.

2. Jednostki EM, które wymykają się spod kontroli

Skala jednostek EM na podstawie wielkości czcionki rodzica. Brzmi elastycznie, dopóki nie zaczniesz gniazdować. Powiedz, że pojemnik używa 1.2EM, a nagłówek w nim używa 1.5em. Ten nagłówek staje się 1,8EM w stosunku do korzenia, ponieważ 1,2 × 1,5 = 1,8. Nestywaj, a rozmiary mogą śnieżkami. Zmień rozmiar czcionki jednego rodzica, a wszystko, co w dalszej części, przesuwa się.

Jednostki REM to naprawiają. Zawsze odwołują się do elementu głównego, więc 2REM oznacza to samo bez względu na to, gdzie jest używany. To sprawia, że typografia jest łatwiejsza do skalowania i kontroli.

3. Jednostki rzutni, które skaczą na telefon komórkowy

Ustaw sekcję bohatera na 100 VH, a ona doskonale wypełnia ekran. Z wyjątkiem mobilnych przeglądarek chowają się i pokazują swoje paski adresowe podczas przewijania. Safari na iOS i Chrome na Androidzie wszystko to robią. Kiedy pasek adresu znika, sekcja 100 VH nagle staje się zbyt wysoka. Kiedy pojawi się ponownie, twoja treść zostaje odcięta.

Nowsza jednostka DVH dostosowuje się do zmieniającego się rozmiaru rzutni. Jednak obsługa przeglądarki wciąż nadrabia zaległości. Jako niepowodzenie działa rozwiązanie JavaScript z użyciem CSS Custom Properties.

Łamanie dostępności z ustalonymi rozmiarami

Użytkownicy często dostosowują domyślny rozmiar czcionki przeglądarki, aby poprawić czytelność. Kiedy masz tekst, przyciski i odstępy za pomocą stałych pikseli, układ może się przerwać - tekst może się przepełnić, przyciski mogą stać się bezużyteczne, a elementy krytyczne mogą zniknąć na wyższych poziomach powiększenia.

Zaleca się, aby cele dotykowe wynoszą co najmniej 44 × 44 pikseli CSS, zgodnie z wytycznymi dostępności, takimi jak standardy WCAG i Apple. Mniejsze cele mogą być trudne dla użytkowników z zaburzeniami silnikowymi do dokładnego dotknięcia.

Zamiast blokowania w ustalonych rozmiarach, użyj skalowalnych jednostek, takich jak REM, aby tworzyć układy, które szanują preferencje użytkownika. Ustaw rozmiar czcionki bazowej na elemencie, a następnie konsekwentnie skalowanie nagłówków, przycisków i odstępów za pomocą względnych jednostek w całej stronie.

5. Mały tekst na ekranach o dużej gęstości

Różne urządzenia pakują piksele inaczej. Ekran telefonu może mieć 400 pikseli na cal, podczas gdy monitor ma 100. Ta sama liczba pikseli wygląda zupełnie inaczej na każdym urządzeniu.

Twój 14-pikselowy tekst wygląda dobrze na monitorze stacjonarnym. Na ekranie telefonu o wysokiej gęstości te same 14 pikseli stają się mikroskopijne. Użytkownicy mrużyli i szczypały, aby powiększyć.

Systemy operacyjne i przeglądarki automatycznie obsługują skalowanie podczas korzystania z jednostek względnych. Twój tekst 1REM staje się większy na ekranach o dużej gęstości, a mniejsze na niskiej gęstości.

6. Mieszanie jednostek bez planu

Używasz REM do niektórych nagłówków, EM dla innych i pikseli do tekstu ciała. W twoim projekcie brakuje rytmu, ponieważ różne elementy skalają się w różnych stawkach. Wybierz system powiązanych elementów. Jeśli twoje nagłówki używają REM, wszystkie nagłówki powinny używać REM. Jeśli twoje odstępy używają, używaj EM do powiązanych odstępów.

Przetestuj wybory na urządzeniach i ustawieniach użytkownika. Sprawdź, jak wygląda twój projekt, gdy ktoś zwiększa rozmiar czcionki. Kilka minut testowania pozwala później naprawić błędy.

Jak zaawansowane jednostki Divi 5 upraszczają zarządzanie CSS

Wrestling z jednostkami CSS szybko się starzeje. Spędzasz godziny na poprawianiu wartości, testowaniu różnych urządzeń i naprawianiu zepsutych układów. Divi 5 całkowicie to zmienia. Nowy system wyciąga zgadywanie z wyboru jednostek i zapewnia kontrolę wizualną nad responsywnym zachowaniem bez dotykania kodu. Ale najpierw zrozummy, czym jest Divi.

Co to jest Divi?

Divi to konstruktor stron internetowych, który zamienia WordPress w coś, co ma sens dla osób, które chcą, aby ich witryny wyglądały dobrze.

Przeciągnij dowolny z ponad 200 modułów wokół swojej strony. Zmień tekst dokładnie tam, gdzie się znajduje. Wybierz nowe kolory i obserwuj, jak pojawiają się natychmiast. Pracujesz nad prawdziwą rzeczą, a nie w jakiś sposób podglądu, który cię leży.

Temat obejmuje ponad 2000 układów, które nie są do bani. Prawdziwe projekty restauracji, fotografów, konsultantów i dziesiątek innych firm. Znajdź taki, który lubisz i popraw, aż poczuje się dobrze.

Builder motywów pozwala kontrolować wszystko. Twórz nagłówki, które nie wyglądają ogólne, zbuduj wyróżniające się strony blogów i zamień 404 strony w coś, co ludzie mogą chcieć zobaczyć.

Buduj strony internetowe za pomocą sztucznej inteligencji

Divi AI działa w obszarze projektowania. Potrzebujesz tekstu? Pisze to.

Chcesz obrazy? To je czyni. Możesz nawet opisać edycje zdjęć, które zajmuje się pracą.

Podobnie dla kodu i nowych sekcji.

Szybkie witryny Divi rozwiązują ten straszny moment, gdy patrzysz na pustą stronę bez pojęcia, od czego zacząć. Wybierz z witryn startowych, którego nasz zespół zaprojektował, wraz z oryginalnymi obrazami i dziełami sztuki.

Lub opisz swój biznes na Divi Quick Sites + Divi Ai i pozwól jej zbudować coś od zera.

Te strony zbudowane przez AI będą miały prawdziwe nagłówki, kopiowanie i obrazy pasujące do tego, co mu powiedziałeś. Wygeneruj wszystko za pomocą sztucznej inteligencji, robienie zdjęć od Unsplash lub upuszcz symbole zastępcze na własne strzały. Najpierw ustaw czcionki i kolory, a następnie pozwól AI obejść je. Wciąż możesz edytować wszystko później.

Co nowego w Divi 5

Divi 5 odbudowuje wszystko od podstaw. Zrzuciliśmy stary system skrótów i zbudowaliśmy coś, co działa lepiej w dzisiejszych standardach internetowych. Witryny ładują się szybciej, redaktor reaguje szybciej, a uzyskasz dostęp do narzędzi, które były wcześniej niemożliwe.

Ale co nowego? Kuknąć:

System układu FlexBox

Budowanie nowoczesnych, responsyjnych stron internetowych w Divi jest teraz szybsze i bardziej intuicyjne. Wprowadziliśmy pełny system układu FlexBox do Divi 5, zapewniając proste elementy sterujące w pionie wyrównania, owijania zawartości i odstępów. Utwórz dokładne układy, które chcesz, nie walcząc z kodem lub używając złożonych obejść.

PRESETET GRUPY OPCJI

Presegatory grup opcji pozwalają zapisać style, które możesz mieszać i dopasowywać wszędzie. Utwórz styl cienia raz, a następnie użyj go na przyciskach, kartach, sekcjach, cokolwiek go potrzebuje. Zaktualizuj ustawienie wstępne i wszystko zmienia się natychmiast w całej witrynie.

Zmienne projektowe

Kolory marki, czcionki i odstępy żyją teraz w jednym miejscu. Możesz przełączyć się z niebieskiego na zielony, edytując jedną zmienną. Cała witryna aktualizuje się automatycznie, więc nie będziesz musiał polować przez dziesiątki modułów.

Zaawansowane jednostki

Teraz możesz użyć wszystkich zaawansowanych jednostek CSS z Divi 5: Od PX do VW/VH. Funkcje CSS również działają również w konstruktorze. Chcesz sekcję o 80% wysokości ekranu bez twojego nagłówka? Wpisz calc (80vh - 100px) i jesteś ustawiony. Interfejs obsługuje Clamp (), min (), max (): Wszystkie te responsywne sztuczki.

Zagnieżdżone rzędy

Rzędy wchodzą teraz do innych rzędów, tak głęboko, jak potrzebujesz. Zbuduj złożone układy czasopism lub szczegółowe strony produktów bez walki ze strukturą. Każdy poziom zapewnia pełną kontrolę nad odstępami i zachowaniem urządzeń.

Edycja jednego kliknięcia

Wskaż i kliknij w dowolnym miejscu na swojej stronie, aby rozpocząć edycję. Za nami stoją dni poszukiwania małych przycisków edycji lub poruszania się po wielu menu.

Konfigurowalne punkty przerwania

Zamiast utknąć w trzech, konfigurowalne punkty przerwania Divi 5 pozwalają włączyć siedem różnych rozmiarów ekranu. Ustaw każdy punkt przerwania dokładnie tam, gdzie potrzebuje Twój projekt, niezależnie od tego, czy 1200px dla dużych monitorów, 900px dla tabletów, czy 650px dla telefonów.

Obszar roboczy wielu panel

Ułóż panele przestrzeni roboczej, jak chcesz. Utrzymuj wiele paneli ustawień otwartych jednocześnie zamiast stale skakać między różnymi obszarami interfejsu.

Zarządzanie atrybutami

Skopiuj określone elementy między różnymi częściami witryny z precyzją chirurgiczną. Chwyć tylko odstępy od jednego elementu, tylko kolory z drugiego lub po prostu ustawienia wstępne z jednej trzeciej. Nigdy więcej transferów wszystkich lub nic.

Skalowanie płótna

Dostosuj rozmiar przestrzeni roboczej, aby wyświetlić podgląd, w jaki sposób witryna pojawia się na różnych urządzeniach. Zobacz widoki mobilne, tabletu i stacjonarne bez przełączania na osobne tryby podglądu.

Ulepszenia wydajności

Teraz wszystko wydaje się coraz bardziej snapp. Strony ładują się szybciej, budowniczy reaguje szybciej, a złożone układy nie wkładają interfejsu tak, jak kiedyś.

Grupy modułów

Włącz wiele modułów w jeden pojemnik. Traktuj bloki tekstowe, obrazy i przyciski jako pojedynczą jednostkę. Poruszaj je razem, układaj razem i skopiuj wszystko na inne strony.

System kolorów HSL

Buduj schematy kolorów z kontrolami odcienia, nasycenia i lekkości. Twórz warianty kolorów marki, które wyglądają profesjonalnie. Matematyka automatycznie tworzy przyjemne kombinacje.

Więcej jest w drodze…

• Builder pętli: buduj szablony powtarzania treści, takich jak siatki blogów lub oferty produktów. Zaprojektuj go raz, pozwól systemowi wypełnić swoją rzeczywistą zawartość.
• Moduły WooCommerce: moduły specyficzne dla sklepu dla sieci produktów, poszczególne strony produktów i funkcjonalność wózka. Wszystko, czego potrzebują sklepy online, zbudowane specjalnie do sprzedaży.

Używanie zmiennych CSS w Divi 5

Stylizacja witryny staje się żmudna, gdy potrzebujesz spójnych wartości w wielu elementach. Zmienne CSS rozwiązują to, przechowując wartości wielokrotnego użytku w jednym miejscu. Divi 5 obsługuje zarówno tradycyjne zmienne CSS, jak i własny system zmiennych projektowych, co daje elastyczność w zarządzaniu wyglądem witryny.

Divi 5 przyjmuje dowolną jednostkę CSS bezpośrednio w swoich polach wejściowych. Napisz wartości REM, VW lub procentowe, w których wcześniej można było używać tylko pikseli. Builder przetwarza te jednostki natychmiast bez dodatkowej konfiguracji.

Funkcje CSS działają w ten sam sposób. Wprowadź zacisk (1REM, 4VW, 3M) dla typografii płynnej lub min (500px, 90%) dla responsywnych szerokości. Po projektowaniu konstruktor wizualnych obsługuje te obliczenia w czasie rzeczywistym.

Zmienne bezproblemowo integrują się z tym systemem. Zdefiniuj zmienną CSS, taką jak-wysokość głowicy: 80px, a następnie odnieś się do niej za pomocą var (–Header-Height) w dowolnym polu. Divi rozpoznaje składnię i automatycznie stosuje przechowywaną wartość.

Ta bezpośrednia integracja oznacza, że możesz mieszać tradycyjne jednostki, nowoczesne funkcje CSS i zmienne w ramach tego samego projektu. Użyj pikseli dla granic, jednostek rzutni dla sekcji i zmiennych dla powtarzanych pomiarów.

Zmienne projektowe: lepszy sposób na zastosowanie zaawansowanych jednostek

Zmienne projektowe są wbudowaną alternatywą Divi 5 dla zmiennych CSS. Działają całkowicie za pośrednictwem interfejsu wizualnego, nie wymagając wiedzy kodowej. Tworzysz i zarządzasz tymi zmiennymi za pomocą panelu Menedżera zmiennych Divi.

Zmienne te wykraczają poza proste liczby i kolory. Przechowuj kompletne adresy URL obrazu, treść tekstu lub złożone wartości stylizacji. Po aktualizacji zmiennej projektowej każdy element korzystający z niej zmienia się natychmiast w całej witrynie.

Divi 5 oferuje kilka typów zmiennych do obsługi różnych potrzeb treści:

• Zmienne kolorowe przechowuj kody sześciokątne, gradienty, kolory marki, kolory tekstu, tła i granice.
• Zmienne czcionki zarządzają typografią globalnie poza ograniczeniami dostosowywania motywów i pracuj dla dowolnych obszarów tekstowych.
• Zmienne liczbowe akceptują dowolną jednostkę CSS plus funkcje CSS, takie jak clamp (), calc (), min () i max () do odstępu, rozmiaru i animacji.
• Zmienne obrazu przechowują obrazy wielokrotnego użytku, takie jak logo, tła i wzory.
• Zmienne tekstowe Przechowuj sznurki tekstowe wielokrotnego użytku, takie jak dane kontaktowe, slogaty i szczegóły firmy.
• Zmienne URL przechowują linki wielokrotnego użytku dla mediów społecznościowych, podmiotów stowarzyszonych, promocji i linków Tel/Mailto.

Konfigurowanie jednostek CSS ze zmiennymi projektowymi

Zmienne liczbowe dają bloki konstrukcyjne dla projektów, które pozostają spójne. Działają najlepiej, gdy powtarzasz ten sam pomiar dla różnych elementów. Ponadto są znacznie prostsze niż zapasy z kodem CSS.

Znajdź menedżera zmiennego w swoim interfejsie Divi. Utwórz nową zmienną liczbową i podaj jej wartość, która pasuje do Twojego projektu. Użyj jasnych nazw, takich jak „padanie przycisków” lub „szczeliny sekcji” zamiast niejasne etykiety.

Tworzenie biblioteki zmiennej

Możesz dodać wspólne zmienne, takie jak:

• „Button-Height” w 3M-Skala przycisków z rozmiarem tekstu
• „Pading sekcji” o 8 VH-odstępy dostosowują się do wysokości ekranu
• „Border-Radius” pod numerem 0,5-zaokrąglone narożniki pozostają proporcjonalne
• „Hero-Height” o 75 VH-sekcje bohaterów wypełniają większość ekranów
• „Fine Border” na 1px-chrupiące linie pozostają ostre
• „Fluid-Text” w Clamp (1rem, 2,5VW, 2rem)-Skalowanie tekstu płynnie
• „Szerokość treści” w min (90%, 1200px)-kontenery pozostają czytelne
• „Dynamic Gap” w calc (2REM + 2vW)-odstępy rosną wraz z rozmiarem ekranu

Zastosuj je w ustawieniach modułu, sekcji lub wiersza.

Zmienne REM skalują się w rozmiarze tekstu. Jednostki VH dostosowują się do mniejszych ekranów. Zmienne za pomocą Clamp () dostosowuj automatycznie między wartościami minimum i maksymalnymi.

Budowanie połączonych ustawień

Po stylizacji elementu zmiennymi zapisz odstęp jako wstępnie ustawiony grupa opcji. Ten ustawienie ustawień teraz zawiera odniesienia do zmiennych liczbowych.

Po zastosowaniu tego ustawienia do innych modułów odziedziczą one te same odstępy między zmiennymi. Zaktualizuj „padanie kart” od 2 do 3 w menedżerze zmiennych i każdy element za pomocą tego wstępnego aktualizacji aktualizacji automatycznie.

Preset pozostaje taki sam, ale wartości zmieniają się. Działa to dla wszystkich zmiennych projektowych: kolorów, czcionek, obrazów, tekstu i adresów URL. Twoje ustawienia wstępne stają się dynamiczne zamiast statyczne, co umożliwia aktualizację witryny z jedną zmianą.

Buduj lepsze strony internetowe z jednostkami CSS i Divi 5

Uzyskanie odpowiednich jednostek CSS zmienia sposób budowania stron internetowych. Naprawisz mniej uszkodzonych układów i tworzysz projekty, które działają w różnych urządzeniach. Pixels Paznokcie precyzyjne szczegóły. Jednostki względne dostosowują się do różnych ekranów i preferencji użytkowników.

Divi 5 sprawia, że budowanie z zaawansowanymi jednostkami CSS jest proste. Wpisz dowolną jednostkę do konstruktora i zobacz wyniki natychmiast. Zmienne projektowe utrzymują pomiary spójne w całej witrynie. Zmień jedną wartość i wszystko podłączone aktualizuje się automatycznie.

Twoje strony internetowe zasługują na lepsze niż bitwy Breakpoint i niekończące się poprawki układu. Wypróbuj Divi 5 i obserwuj, że jednostki CSS zamieniają frustrujące sesje projektowe w płynne przepływy pracy.