Co to jest Clamp () w CSS (i jak go używać)

Jeśli kiedykolwiek próbowałeś, aby Twoja witryna wyglądała dobrze na zarówno telefonach, jak i gigantycznych monitorach, widziałeś, jak pęknie odstępy, czcionki drastycznie lub nadmiernie skalują, a elementy albo przytłaczają lub znikają. Aby to wszystko naprawić, w końcu napiszesz długą listę zapytań medialnych dla jednego układu. Tam może pomóc Clamp ().

Jest to funkcja CSS, która upraszcza rozmiary ustawień. Zamiast definiować wiele wartości przy ustalonych punktach przerwania, pozwala ustawić minimum, preferowane i maksimum, aby elementy w skali płynnej wraz ze zmianą ekranu. Najlepsze jest to, że pozostają w określonych granicach, więc nie ma niespójności układu.

W tym poście wyjaśnimy, jak działa Clamp (), dlaczego często może być bardziej wydajny niż zapytania medialne i jak Divi 5 pozwala z niego korzystać bez pisania jednego wiersza kodu!

Co to jest Clamp ()

Clamp () jest funkcją natywną w CSS, używaną do definiowania responsywnych wartości dostosowujących się do rozmiaru ekranu. Zamiast kodować pojedynczą liczbę, dajesz przeglądarce zakres do pracy - ustawiasz minimalną wartość, skalowalną wartość preferowaną i maksymalną wartość. Dzięki temu Twój układ jest bardziej elastyczny i nie musisz pisać wielu zapytań multimedialnych dla każdego rozmiaru ekranu.

Zrozummy to przy przykładzie wielkości czcionki płynnej, który zwiększa/zmniejsza się na podstawie wielkości ekranu.

font-size: clamp(40px, 7vw, 100px);

Tutaj wielkość czcionki nigdy nie spadnie poniżej 40px, skala oparta na 7% szerokości rzutni i przestanie rosnąć, gdy osiągnie 100px.

Kolejną dużą zaletą korzystania z Clamp () jest to, że w przeciwieństwie do zapytań medialnych, unika sztywnych skoków i utrzymuje twój styl bardziej przewidywalny i czytelny.

Co przez to rozumiemy? Zrozummy to, porównując Clamp () z zapytaniami medialnymi.

Porównanie zapytań Clamp () i mediów

Zapytania o media to kolejny powszechny sposób dostosowania rozmiarów czcionek dla różnych szerokości ekranu. Tutaj definiujesz punkty przerwania w określonych szerokościach ekranu, gdzie zmieniają się twoje style. Na przykład możesz przypisać jeden rozmiar czcionki dla komputera stacjonarnego, drugi dla tabletu i trzeci dla telefonu komórkowego, tak aby rozmiar czcionki zmienia się tylko wtedy, gdy szerokość ekranu trafia w każdy punkt przerwania.

Ta metoda działa, ale nie jest płynna. Od 1000px do 501px rozmiar czcionki pozostaje zablokowany na 100px. W momencie, gdy ekran osiągnie 500px, czcionka nagle spada do 30px. Oznacza to brak płynnego przejścia, tylko ostra zmiana.

Więc jeśli chcesz sprawić, by skalowanie było bardziej naturalne, musisz dodać kilka punktów przerwania i ręcznie dostosować rozmiar czcionki w każdym z nich. To sprawiłoby, że twój kod będzie długi i rozdęty.

W przeciwieństwie do tego Clamp () oszczędza od nagłego przejścia i długiego kodu. W rzeczywistości można go napisać w jednej linii: Font-size: Clamp (30px, 7vw, 100px).

To mówi przeglądarce, aby skali czcionki między 30px a 100px na podstawie 7 procent szerokości rzutni. Rozmiar czcionki dostosowuje się płynnie we wszystkich rozmiarach ekranu bez nagłych skoków lub potrzeby wielu punktów przerwania. Nadal definiujesz granice, ale skalowanie pomiędzy nimi jest automatyczne i bardziej spójne.

W akcji na żywo oto jak wygląda porównanie rozmiaru czcionki z zapytań medialnych i Clamp ():

W celu responsywnego rozmiaru Clamp () robi zauważalną różnicę. Zamiast czekać na stałe szerokości ekranu uruchamiające zmiany stylu, reaguje na każdy piksel pomiędzy nimi. Dzięki temu Twój kod jest bardziej spójny na wszystkich urządzeniach. Ponadto jest powszechnie wspierany przez większość współczesnych przeglądarek, co oznacza, że ​​dobrze się reni w tych przeglądarkach , co czyni go niezawodnym i praktycznym zamiennikiem.

Jak działa clamp () za kulisami

Clamp () bierze trzy wartości, które działają razem, aby skalować dowolną właściwość CSS:

 clamp(minimum, preferred, maximum) 

Każda część funkcji ma określoną rolę:

• Minimalna wartość: najniższa możliwa wartość. Element nie będzie skali poniżej tego punktu, bez względu na to, jak mały jest ekran.
• Wartość preferowana: ta wartość skaluje się na podstawie rozmiaru ekranu. Zazwyczaj jest ustawiany przy użyciu jednostek względnych, takich jak VW lub wyrażenie calc (), aby umożliwić swobodną płynność.
• Maksymalna wartość: najwyższy dozwolony rozmiar. Nawet na bardzo dużych ekranach element nie przekroczy tej wartości.

Gdy przeglądarka oblicza ostateczny rozmiar, najpierw ocenia preferowaną wartość. Przeglądarka używa minimum, jeśli rozmiar ekranu jest na tyle mały, że preferowana wartość spadnie poniżej minimum. Podobnie, jeśli ekran jest wystarczająco szeroki, aby preferowana wartość przekroczy maksimum, przylega do tego.

To sprawia, że ​​zachowanie jest przewidywalne. Zawsze wiesz, że Twój projekt pozostanie w określonym zakresie, ale otrzymujesz elastyczne skalowanie między tymi granicami. Ustawiając minimalne i maksymalne limity, Clamp () zapewnia płynną skalę pierwiastków, ale nigdy nie. Wystarczy.

Wybór właściwej wartości preferowanej

Być może zauważyłeś, że preferowana wartość (środkowa) odgrywa w tym wszystkim większą rolę. Decyduje o skali skali elementów.

Po pierwsze, nie powinna to być stała wartość, taka jak zacisk (40px, 80px , 120px), ponieważ w tym przypadku preferowana wartość w ogóle nie skala. Ponieważ 80px już spada między limitem, przeglądarka blokuje go i ignoruje zmiany wielkości ekranu. Powoduje to wartość statyczną, która przede wszystkim pokonuje cel używania Clamp ().

Zamiast tego preferowana wartość powinna zawsze być względna , jak w zacisku (40px, 7vW , 120px). Tutaj 7VW odpowiada na szerokość rzutni, co pozwala płynne skalowanie elementu na rozmiarach ekranu. Funkcja zacisku zapewnia następnie, że nigdy nie spadnie poniżej 40px lub powyżej 120px, utrzymując rozmiar reagowania na 7% szerokości ekranu.

Musisz także rozważyć rozmiar wartości względnej. Na przykład mniejsza wartość, taka jak 2VW, skaluje element bardziej stopniowo na rozmiarach ekranu, podczas gdy większa wartość, taka jak 6VW, powoduje szybsze skalowanie i szybciej osiąga maksymalny rozmiar. Aby określić, które skalowanie działa dla Ciebie, wypróbuj kalkulator skali typu płynu. Umożliwia podgląd różnych wartości i eksportować gotowe do użycia CSS.

Uwaga: Kalkulator skali typu płynu wyświetla wartości VI. Jeśli używasz wygenerowanego wyjścia w Divi, pamiętaj o zmianie jednostek VI na VW.

Różne typy jednostek w Clamp ()

Jednostki wewnątrz Clamp () wpływają na to, jak zachowuje się w różnych urządzeniach. Oto wszystko, czego możesz użyć:

W większości przypadków programiści używają PX dla wartości minimalnych i maksymalnych oraz jednostki płynnej, takiej jak VW dla preferowanej wartości. Daje to najlepszą równowagę między kontrolą a reakcją.

Możesz jednak również użyć jednostek względnych dla wartości MIN i MAX, takich jak Clamp (2REM, 4REM, 8M). To sprawia, że ​​Twój projekt jest bardziej dostępny i łatwiejszy do skalowania, jeśli zmienia się rozmiar czcionki głównej. Jest to szczególnie przydatne dla użytkowników, którzy dostosowują ustawienia przeglądarki w celu czytelności.

clamp () w Divi 5

Funkcja Clamp () w CSS jest niezwykle przydatna, ale tylko jeśli czujesz się komfortowo pisanie kodu. A co z tymi, którzy wolą budować swoje strony wizualnie bez dotykania arkusza stylów? Czy chciałbyś budować układy płynów za pomocą Clamp (), ale bez pisania kodu?

Jeśli tak, zaawansowane jednostki Divi 5 mogą pomóc.

Subskrybuj nasz kanał YouTube

Krótko mówiąc, Divi 5 obsługuje Clamp () jako zaawansowaną jednostkę przez konstruktora i jest bardzo łatwy do do nich dostępu. Gdziekolwiek możesz wprowadzić wartość liczbową, taką jak rozmiar czcionki, odstępy lub szerokość sekcji, znajdziesz opcję bezpośrednio użycia clamp ().

Wystarczy kliknąć w polu wejściowym, aby wybrać z różnych zaawansowanych jednostek dostępnych w Divi 5 (patrz ciemna lista obok rozmiaru tekstu nagłówka) , zmień typ jednostki i zdefiniuj swoje wartości minimum, preferowane i maksymalne.

I to wszystko! W ogóle bez kodowania ani CSS - wszystko, co zrobiłeś, to wprowadzić wartość zacisku (), a twój nagłówek stał się tak płynny.

Divi 5 ułatwia tworzenie płynnych, responsywnych projektów bez pisania niestandardowych CSS. Otrzymujesz całą elastyczność Clamp () z prostotą edytora wizualnego. (Divi 5 obsługuje wiele innych zaawansowanych jednostek, w tym Clamp ()).

Dowiedz się wszystkiego o zaawansowanych jednostkach Divi 5

Jak używać Clamp () w Divi 5?

Do tej pory widziałeś, jak łatwo jest użyć Clamp () w Divi 5. Po prostu wybierasz jednostkę Clamp () i dodajesz preferowane wartości. Bez niestandardowego kodu, bez plików CSS, tylko czysty, wizualny interfejs.

Ale to, co sprawia, że ​​Clamp () naprawdę potężny Inside Divi to nie tylko sama funkcja. To właśnie z tym działa.

Divi 5 jest zbudowany wokół modułowego systemu projektowania. Oznacza to, że możesz łączyć Clamp () z innymi zaawansowanymi funkcjami, takimi jak zmienne projektowe i funkcje CSS, takie jak calc (), aby układ nie tylko reagował, ale także spójny i łatwy w skali. I właśnie tam robi się interesujące - Divi 5 ułatwia dopasowanie Clamp () do twojego przepływu pracy.

clamp () działa ze zmiennymi projektowymi

Najlepszym, najbardziej wydajnym sposobem skutecznego stosowania Clamp () w Divi 5 jest połączenie go ze zmiennymi projektowymi.

Zmienne projektowe pozwalają zdefiniować wartości globalne (takie jak typografia, kolory, a nawet rozmiary czcionek), dzięki czemu możesz je używać w całej witrynie, aby zachować konsekwentne. Możesz także zapisać wartości Clamp () jako zmienne liczbowe. Pozwala to zapisać responsywne wartości globalne, tak że po ich zmianie wszystkie instancje są aktualizowane jednocześnie.

Na przykład definiujesz rozmiary Clamp () dla nagłówków H1-H6 w ten sposób:

I zapisz je wewnątrz menedżera zmiennego w Divi Builder:

Wtedy wszystkie nagłówki w Witrynie będą dostosować się na podstawie zdefiniowanych wartości Clamp ().

Teraz, jeśli chcesz zaktualizować rozmiar H3, po prostu zmodyfikuj jego zmienną liczbową i będzie ona aktualizowana wszędzie, gdzie go użyłeś. ( Chcesz stworzyć własny system typograficzny w Divi 5?

Takie podejście pozwala na scentralizowaną kontrolę, ułatwiając aktualizowanie ustawień typografii na całym świecie bez ręcznego dostosowywania każdej instancji. Stosując te zmienne Clamp () za pośrednictwem ustawień grup opcji, usprawniasz proces projektowania.

clamp () łączy się z calc ()

Możesz także użyć funkcji calc () wewnątrz clamp (), aby dopracować skalę wartości. Jest to szczególnie przydatne, gdy chcesz dodać rozmiar podstawowy, a następnie skalować go dokładniej za pomocą względnej jednostki, takiej jak VW.

Na przykład rozmiar czcionki: zacisk (1rem, calc (0,75rem + 2 ww), 2,5rem) używa calc () do dodania stabilnej bazy (0,75rem), a następnie skalowania jej z 2 ww.

Umożliwia to czcionkę skalowaną na podstawie szerokości rzutni, ale także nadaje jej przewagę z podstawowym rozmiarem czcionki. Jest to przydatne do utrzymywania czytelności na mniejszych ekranach bez konieczności wielu zmian zacisków. Calc () Inside Clamp () jest idealny dla dowolnego miejsca, w którym chcesz tę dodatkową kontrolę nad tym, jak skalują się sprawy.

Praktyczne użycie przypadków Clamp ()

Teraz spójrzmy na niektóre powszechne przypadki użycia Clamp () i jak łatwo staje się, gdy stosujesz go z Divi 5:

1. Spójne rozmiary nagłówka na wszystkich urządzeniach

Responsywna typografia jest najlepszym przypadkiem użycia Clamp (). Ponieważ już zdefiniowaliśmy nasze rozmiary nagłówka (H1-H6) za pomocą Clamp () w zmiennych projektowych, nadszedł czas, aby zobaczyć je w akcji.

Utworzyliśmy tę stronę za pomocą H5s dla elementów menu. Następnie zastosowaliśmy zmienną liczbową H5 do każdego z rozmiarów tekstu H5. I jak widać, każda płynna płynnie skaluje się w punktach przerwania.

Tekst pozostaje jasny, zrównoważony i wizualnie spójny we wszystkich naszych zdefiniowanych responsywnych punktach przerwania.

Możesz także użyć Clamp () do wysokości linii i odstępów literowych. Pomaga utrzymać optymalną czytelność poprzez nieznacznie zwiększając luki lub odstępy, gdy ekran staje się szerszy. Niewielka zmiana, ale sprawiłaby, że długie treści wydawałyby się bardziej oddychające.

2. Ustaw szerokość clamp () dla sekcji akapitowych na dużych ekranach

Akapity są naturalnie łatwe do odczytania na urządzeniach mobilnych, ponieważ krótkie linie na kompaktowych ekranach sprawiają, że treść można strawić. Jednak na bardzo szerokich monitorach czytelnicy będą zmuszeni skanować całe rzędy poziome, jeśli sekcja pełnej szerokości rozciągnie tekst zbyt daleko. Wydaje się, że czytanie billboardu. Idealna długość linii zdania wynosi około 50–75 znaków, więc jeśli Twoja witryna wyświetla niekończące się zdanie na szerokim ekranie, możesz stracić zainteresowanie czytelnika.

Aby to naprawić, ustaw responsywną szerokość, taką jak zacisk (300px, 65VW, 800px), aby skalować akapit do stałej szerokości (800px), aby akapity wydają się czytelne nawet na szerszych ekranach.

Jest to idealny sposób, aby Twoje posty na blogu były czytelne na szerszych ekranach.

3. Set Clamp () szerokość dla pojedynczych lub polecanych obrazów

Podobnie pojedyncze obrazy (jak wyświetlone obrazy) mogą wydawać się zbyt duże na bardzo szerokich ekranach. Wygląda idealnie na tablecie, ale może niezręcznie rozciągać się na monitor 4K, który może wydawać się przytłaczający w porównaniu z resztą treści.

Aby to naprawić, użyj szerokości obrazu opartego na zacisku, takiej jak zacisk (300px, 60VW, 1000px). Zapewnia, że ​​obraz rośnie płynnie z rozmiarem ekranu, ale zatrzymuje się, zanim dominuje w układzie.

W przeciwnym razie możesz po prostu ustawić szerokość Clamp () dla całego wiersza pojemnika, aby zapewnić równomierną skalę wszystkich elementów (obraz, nagłówek i tekst).

4. Dodaj płynne wyściółki i margines z zaciskiem ()

Projektanci często mają odstępy na komputery stacjonarne, ale nie zawsze działa dobrze na mniejszych lub bardzo dużych ekranach. Naprawiono wyściółkę i marginesy nie zawsze dostosowują się do rozmiaru ekranu. W tym miejscu Clamp () staje się przydatny.

Na przykład margines zacisk (0,5rem, 2 ww, 2rem) i zacisk (1REM, 3vW, 4REM) w galerii obrazów tworzą przestrzenie, które zaczynają się od małych i skalowanych z ekranem.

Daje to miejsce do oddychania na dużych ekranach i utrzymuje ciasne rzeczy na telefonie komórkowym:

Clamp () pomaga również płynnie skalować wyściółki wokół układów kart, galerii obrazów, pojemników sekcji i bloków tekstowych, szczególnie gdy chcesz umyślne odstępy bez stałego poprawienia punktów przerwania.

5. Utwórz responsywne sekcje bohaterów, które bezskutecznie skalują

Za pomocą Clamp () możesz sprawić, by sekcje bohaterów wyglądały idealnie na każdym ekranie, definiując nagłówek bohatera, wyściółka przycisków i odstępy podtytułowe. Zapisaliśmy te wartości Clamp () jako zmienne projektowe, aby uprościć ich zastosowanie. (Ale nie chciałbyś wypełniać swojego menedżera zmiennego, oszczędzając każdą minutę.)

Zastosowanie tych wartości jest teraz łatwe.

Po zapisaniu każdy automatycznie dostosuje się do rozmiaru ekranu, aby zapewnić sekcję bohatera idealne pierwsze wrażenie na każdym urządzeniu.

Projektuj układy pikselowe za pomocą Clamp (), bez zapisywania pojedynczego wiersza kodu

Camp () pomaga projektować płynne, responsywne układy bez polegania na niekończących się zapytaniach medialnych. A dzięki Divi 5 nie musisz pisać jednego wiersza kodu, aby go używać. Niezależnie od tego, czy wolisz kodowanie, czy lubisz projektowanie wizualne, zaawansowane jednostki Divi ułatwiają stosowanie Clamp () do czcionek i odstępów.

Czy potężne funkcje, takie jak Clamp () tak łatwo dostępne, czy nie chciałbyś spróbować Divi 5 dla siebie? Przetestuj różne wartości, utwórz własny system responsywny i zobacz, jak elastyczne mogą stać się układy. A kiedy masz ulubioną sztuczkę, udostępnij go w komentarzach poniżej! Chcielibyśmy zobaczyć, co tworzysz.