Zrozumienie jednostek CSS (i jak z nich korzystać)

Prawdopodobnie widziałeś wcześniej różne jednostki CSS w kodzie internetowym, ale zrozumienie, jak działają, pozwala używać ich bardziej celowo. W tym poście dowiesz się, jakie są tak naprawdę jednostki CSS, w jaki sposób wpływają one na twoje układy i jak korzystanie z nich w Divi 5 pomaga bardziej responować.

Divi 5 wprowadza natywne wsparcie dla jednostek CSS bezpośrednio do budowniczego. Dzięki funkcji nowej zaawansowanych jednostek możesz użyć %, EM, REM, VW i innych bez kodu niestandardowego.

Co to są jednostki CSS?

Jednostki CSS mówią przeglądarce, jak duże lub małe powinno być coś. Niezależnie od tego, czy ustawiasz rozmiar nagłówka, szerokość sekcji, czy odstępy między elementami, używasz jednostek do zdefiniowania tego miejsca. Bez nich przeglądarka nie ma pojęcia, co zrobić z twoimi wartościami.

Na przykład pisanie szerokości: 100 nie oznacza nic dla przeglądarki. Ale dodaj jednostkę, na przykład 100px lub 100%, a teraz wie dokładnie, czego chcesz.

Weź ten przykład z czterema pudełkami, z których każdy używa innej wartości CSS:

• Pierwsza wykorzystuje szerokość: 100. Technicznie nieprawidłowe, ale wiele przeglądarek uczyni to jako 100%.
• Drugi (100px) wykorzystuje stałą szerokość.
• Trzecia i czwarta (100% i 60%) skali w stosunku do pojemnika macierzystego.

Możesz się zastanawiać, dlaczego pierwsze pudełko o szerokości: 100 nadal wydaje się pełna szerokości, mimo że jest technicznie nieprawidłowe.

Szerokość: 100 jest ignorowana przez przeglądarkę, ponieważ brakuje jej jednostki. Ale w tym przypadku pudełko wciąż rozciąga się na pojemniku, nie dlatego, że CSS został zaakceptowany, ale dlatego, że elementy na poziomie blokowym, takie jak Div, naturalnie obejmują pełną szerokość ich rodzica domyślnie. Jest to przypadek zachowania domyślnego, a nie wynikające z tego, że nieprawidłowe CSS są interpretowane jako 100%.

Popularne jednostki CSS

Choć powszechnie pojawiają się PX i %, wiele innych jest równie przydatnych, gdy wiesz, kiedy ich użyć:

Zobaczysz te jednostki wszędzie w projektowaniu stron internetowych, od ustawiania rozmiarów czcionek, definiowania szerokości sekcji, regulacji wyściółki i marginesów oraz budowania elastycznych układów siatki. Są jednym z najważniejszych czynników decydujących o tym, jak wygląd i zachowuje twój układ. I tam, gdzie używasz, które jednostki mają większe znaczenie w skutecznym projektowaniu, wkrótce do tego dojdziemy.

Ale po pierwsze, pomocne jest, aby wiedzieć, że wszystkie jednostki CSS należą do dwóch głównych typów: absolutnych i względnych.

Jednostki absolutne i względne

Zrozumienie różnicy jest niezbędne, jeśli chcesz, aby Twój układ działał dobrze w różnych rozmiarach ekranu.

Jednostki absolutne

Jednostki bezwzględne mają ustalone wartości. Oznacza to, że po ustawieniu czegoś na 100px zawsze będzie miał szerokość 100 pikseli, niezależnie od tego, czy użytkownik jest na telefonie, tablecie, czy masywnym monitor komputerów stacjonarnych. Jednostki te nie reagują na rozmiar ekranu ani otaczającego układu, co czyni je świetnymi, gdy potrzebujesz dokładnej kontroli.

Często są używane do granic, rozmiarów ikon lub stałych cieni pudełek, zwykle, gdy precyzja ma większe znaczenie niż elastyczność.

Ale ta sama precyzja może powodować problemy. Projekt, który wygląda idealnie na dużym ekranie, może się przepełnić, zmniejszyć niezręcznie lub całkowicie pękać na mniejszych urządzeniach. Ponieważ jednostki absolutne nie dostosowują się, mogą sprawić, że układ poczuł się sztywny, chyba że jest używany.

Jednostki względne

Jak sama nazwa wskazuje, dostosowują się do ich otoczenia. Zamiast pozostać zablokowanym do określonego rozmiaru, skalują się w zależności od kontekstu (element nadrzędny, rzutek itp.). To sprawia, że są znacznie bardziej elastyczni w responsywnym projektowaniu.

Niektóre jednostki reagują na rozmiar elementu nadrzędnego, inne na rozmiar czcionki głównej strony, a niektóre nawet reagują na samo okno przeglądarki. Oto kilka kluczowych:

• % skali z pojemnikiem macierzystym.
• EM dostosowuje się na podstawie wielkości czcionki elementu nadrzędnego.
• REM podąża za rozmiarem czcionki głównej strony.
• VW i VH reagują na szerokość i wysokość przeglądarki.

Ponieważ dostosowują się do różnych środowisk, jednostki te pomagają budować układy, które wydają się naturalne na każdym ekranie. Rozszerzają się lub kurczą się z podaną przestrzenią, która zapewnia czytelne treści, a projekt jest równoważony na urządzeniach.

Spójrzmy na szybki przykład, aby zobaczyć, dlaczego ta elastyczność ma znaczenie. Załóżmy, że budujesz sekcję obrazu i ustawiasz jego szerokość na 1200px.

Może to wyglądać idealnie na dużym monitorze, ale na tablecie o szerokości ekranu 768 pikseli obraz może się przepełnić i wyglądać dziwnie. Teraz spróbuj użyć:

width: 100%;

To mówi przeglądarce, aby obraz wypełnił szerokość pojemnika. Niezależnie od tego, czy ekran jest szeroki, czy wąski, obraz dostosowuje się automatycznie.

Prawdziwą zaletą stosowania jednostki względnej jest reakcja. Nie tylko przypisujesz rozmiar, ale przeglądarkę jasne instrukcje dotyczące tego, jak twój układ powinien zachowywać się w różnych scenariuszach. A kiedy dobrze to zrobisz, treść pasuje do każdego ekranu.

Korzystając z jednostek względnych, w których mają sens, unikasz sztywnych układów, zmniejszają potrzebę przerwania i zapewnić łatwiejsze zarządzanie projektem. A dzięki Divi nie musisz pisać jednego wiersza kodu, aby używać różnych jednostek CSS. Wybierz żądaną jednostkę w konstruktorze i zobacz, jak układ odpowiada w czasie rzeczywistym.

Kiedy użyć, która jednostka CSS

Teraz, gdy rozumiesz różnicę między jednostkami bezwzględnymi i względnymi, następnym krokiem jest wiedza, kiedy je użyć.

Z reguły idź z jednostkami względnymi, gdy układ musi dostosować się do różnych rozmiarów ekranu. Są one idealne do szerokości sekcji, typografii, odstępów między elementami lub układami na całej strony. Ponieważ skalują się automatycznie, pomagają zachować spójność bez tworzenia osobnych stylów dla każdego urządzenia.

Z drugiej strony jednostki absolutne są pomocne, gdy chcesz, aby coś pozostało takie samo, niezależnie od wielkości ekranu. Pomyśl o granicach, ikonach, stałych odstępach lub małych szczegółach wizualnych.

Oto kilka przykładów, które kierują twoimi wyborami:

• Użyj PX, gdy potrzebujesz dokładnej kontroli, jak w przypadku rozmiarów ikon. Ponieważ nie dostosowuje się, unikaj go w przypadku szerokości układu lub tekstu.
• Używaj %, gdy chcesz, aby elementy skali się za pomocą ich pojemnika.
• Użyj EM, gdy chcesz, aby odstępy są skalowane z rozmiarem czcionki elementu nadrzędnego.
• Użyj REM (powszechnie określany jako root EM), jeśli chcesz spójny rozmiar w całej witrynie. Ponieważ opiera się na rozmiarze czcionki korzeniowej, zachowuje przewidywanie odstępów i typografii.
• Użyj VW i VH do sekcji pełnego ekranu, obszarów bohaterów lub odstępów, które reagują bezpośrednio na rzutnię (cały widok ekranu urządzenia).

Aby uzyskać bardziej zaawansowaną kontrolę, możesz również łączyć jednostki za pomocą funkcji CSS. calc () jest przydatne podczas mieszania wartości, takich jak 1rem + 5vW dla odstępów responsywnych z minimalną podstawą. A Clamp () jest idealny do ustawiania wartości płynów, które rosną lub kurczą się między granicami, co czyni go czystszą alternatywą dla zapytań medialnych.

Ostatecznie wybór odpowiedniej jednostki polega na rozważeniu, w jaki sposób każdy element powinien zachowywać się w różnych scenariuszach i wybranie jednostki, która najlepiej to osiągnie.

Zaawansowane jednostki Divi do budowy bez kodowania

Widzieliśmy już, w jaki sposób jednostki CSS dają ci kontrolę nad zachowaniem układu. Divi 5 przejmuje tę kontrolę i sprawia, że korzystanie z zaawansowanych jednostek jest łatwe.

Subskrybuj nasz kanał YouTube

Dzięki natywnej obsłudze %, EM, REM, VW i VH wbudowanej bezpośrednio w konstruktora, możesz zastosować prawdziwe wartości CSS do modułów, sekcji, odstępów i typografii, bez konieczności otwierania panelu kodu. W dowolnym polu numerycznym po prostu wybierz preferowaną jednostkę z rozwijania jednostki zaawansowanej, dostosuj wartość i zobacz zmiany na żywo.

I to się nie kończy. Divi pozwala również używać zaawansowanych funkcji CSS, takich jak calc () i clamp () w wizualnym budowniczym. Oznacza to, że możesz tworzyć wartości płynów, mieszać jednostki i układanie dopracowania z tym samym poziomem precyzyjnych programiści, które dostają od ręcznie napisanego CSS, ale wizualnie.

Potrzebujesz rozmiaru czcionki, który płynnie skaluje się na różnych rozmiarach ekranów? Użyj Clamp (). Chcesz zrównoważyć odstępy za pomocą mieszanki stałych i elastycznych wartości? Spróbuj calc (). Divi radzi sobie z tym wszystkim, natychmiast i wyraźnie.

Nie zgadujesz ani nie przełączasz się między projektowaniem a kodem. Divi daje wizualną moc i natychmiastową informację zwrotną, aby uzyskać responsywną logikę z pełną kontrolą nad tym, jak skalują się elementy i zachowują się w różnych urządzeniach.

Dowiedz się wszystkiego o zaawansowanych jednostkach Divi 5

Jednostki CSS idealnie synchronizują się z zaawansowanymi przepływami pracy Divi

Widziałeś już, jak Divi sprawia, że używanie poszczególnych jednostek CSS jest łatwe w tuż w budowniczym. Ale prawdziwa siła pokazuje, gdy jednostki te współpracują z całą witryną. Właśnie tam takie funkcje takie jak zmienne projektowe, ustawienia z grupami opcji i zaawansowane funkcje CSS, takie jak calc () i clamp ().

Divi nie tylko pozwala wprowadzić jednostki CSS na pola. Pomaga zintegrować je z całym systemem projektowym bez pisania kodu. Wszystko pozostaje spójne, skalowalne i łatwiejsze w utrzymaniu.

Zobaczmy, w jaki sposób Divi pomaga używać jednostek CSS w ramach elastycznego przepływu pracy opartej na logice:

1. Utwórz logikę układu ze zmiennymi projektowymi

Jednym z najłatwiejszych sposobów zaoszczędzenia czasu na każdym projekcie jest zaplanowanie logiki układu z góry. Zamiast dostosowywać ten sam rozmiar lub rozmiar czcionki w wielu miejscach, raz definiujesz te wartości i ponownie wykorzystujesz je w całym projekcie, ze zmiennymi projektowymi Divi.

Możesz utworzyć wartości wielokrotnego użytku, takie jak –Card-Pading lub –Section Gap, przy użyciu prawdziwych jednostek CSS, takich jak 2REM, 5VW, a nawet formuły, takie jak calc (2REM + 1VW). Po ustawieniu wartości te można zastosować w modułach, wierszach i sekcjach, aby wszystko było spójne.

Musisz zaktualizować zmienną tylko wtedy, gdy chcesz ją później zmienić. Zmiana odzwierciedla wszędzie, gdzie jest używana, oszczędzając w kierunku polowania na indywidualne ustawienia. A ponieważ jednostki CSS są wbudowane bezpośrednio w system Divi, nie polegasz na domysłach, ale stosując prawdziwą logikę CSS, wizualnie. To sprawia, że Twój układ jest łatwiejszy, skalowalny i łatwiejszy do dostosowania w miarę wzrostu projektu.

2. Użyj Clamp () i calc () wizualnie

Funkcje CSS, takie jak clamp () i calc () pomagają w budowaniu responsywnych układów. Pozwalają ci zdefiniować elastyczne wartości, które dostosowują się do rozmiarów ekranu bez zapisywania zapytań multimedialnych. Zamiast ustawiać ustalone rozmiary dla każdego urządzenia, możesz napisać logikę, taką jak zacisk (1REM, 2VW, 2.5rem), aby przeglądarka sprawna jest płynnie pomiędzy limitami ustalonymi. Lub użyj Calc (100 VH - 80px), aby dostosować sekcję bohatera w oparciu o wysokość rzutni.

Zwykle wymagają ręcznego pisania CSS. W Divi możesz wprowadzić je bezpośrednio wewnątrz dowolnego pola liczb.

A ponieważ jednostki CSS są obsługiwane w obu funkcjach, możesz mieszać wartości takie jak REM, VW i PX, aby uzyskać dokładnie pożądane zachowanie. Wyniki widzisz na żywo podczas pisania, co ułatwia eksperymentowanie i poprawa reakcji bez opuszczania konstruktora.

3. Zapisz logikę jednostki za pomocą ustawień grupowych opcji

Po skonfigurowaniu układów za pomocą zaawansowanych jednostek lub formuł nie musisz ich ponownie odbudowywać. Divi pozwala zapisać swoją logikę stylizacji, w tym takie rzeczy jak wyściółka: Clamp (1rem, 3vw, 2rem), jako ustawienie grupy opcji.

Oznacza to, że następnym razem, gdy będziesz potrzebować tego samego rozstawu lub wzoru układu, nie stosujesz tych samych ustawień, ale tylko zapisany ustawienie.

A jeśli używasz zmiennych projektowych wewnątrz ustawień wstępnych, jest jeszcze lepiej. Możesz łatwo utworzyć połączony system, w którym modyfikacja stylów całej witryny zależy tylko od jednej rzeczy: zmiany zmiennej.

W Divi korzystanie z urządzenia CSS nie jest nie tylko rozmiaru; Chodzi o zachowanie. Każda ustawiona wartość staje się częścią systemu wizualnego, który dostosowuje się, skaluje i pozostaje spójny w całym układzie. A ponieważ wszystko jest wbudowane w konstruktora, przypomina to kodowanie, a bardziej projektowanie z logiką.

Divi zamienia jednostki CSS w wizualną supermocarnię

Nie musisz pisać CSS, aby używać jednostek CSS. Divi 5 wprowadza je wszystkie do interfejsu wizualnego, w którym można odkrywać, stosować i podgląd w czasie rzeczywistym. Niezależnie od tego, czy dostosowujesz odstępy, budując typografię płynną, czy tworzysz logikę układu za pomocą zmiennych i ustawień wstępnych, Divi pozwala to wszystko wizualnie.

Gotowy do wypróbowania? Pobierz Divi 5 i zacznij używać prawdziwych jednostek CSS w swoich projektach.