Używanie Min () i Max () w Divi 5 do tworzenia inteligentnych układów

CSS Min () i Max () to dwie wszechstronne, ale niewykorzystane funkcje w responsywnym projektowaniu stron internetowych, a Divi 5 ma pełne wsparcie dla obu od aktualizacji jednostek zaawansowanych. Chociaż wcześniej badaliśmy typografię płynną za pomocą obliczeń Clamp () i dynamicznych za pomocą calc (), min () i max (), dają jeszcze prostsze sposoby osiągnięcia responsywnego projektu.

W tym poście pokażemy, jak korzystać z tych funkcji za pomocą Divi (Divi 5 jest gotowy do użycia na nowych stronach internetowych, z zaleceniami migracji dla istniejących witryn wkrótce). Wszystko, co możesz zrobić, aby korzystać z funkcji responsywnych, zmniejszy Twoją zależność od zapytań medialnych, CSS to piękna rzecz!

CSS Min () i Max (): Mądrzejsze układy z prostszą logiką

Jeśli już zbadałeś Clamp (), jesteś w połowie drogi do opanowania min () i Max ()! Jeśli pamiętasz, Clamp () używa trzech wartości jednocześnie (min, preferowane i maks.), Min i Max w Clamp () to ta sama koncepcja, ale z zaledwie 1/3 logiki w danym momencie.

Co robią Min () i Max ()?

Funkcje Min () i Max () pozwalają ustawić dwie lub więcej wartości, przy czym wyświetlane są najmniejsze (min) lub największe (maksymalne) na podstawie rozmiaru ekranu.

„Punkt przejścia” jest określany odpowiedni do dwóch ustawionych wartości, więc jest to tylko dla celów wizualizacji

Min (): Zawsze wybiera mniejszą wartość

Użyj min (), aby zapobiec nadmierne rozciąganie zawartości szerokich ekranów. Jest to idealne dla układów, które nie powinny rosnąć zbyt szeroko na dużych ekranach, ale powinno mieć dużą elastyczność w skalowaniu w dół, ponieważ rozmiary ekranu są mniejsze.

 width: min(100%, 500px); 

W tym przykładzie szerokość elementu nigdy nie przekroczy 500px, ale wyniesie 100%, jeśli będzie to poniżej tego znaku 500px.

Max (): Zawsze wybiera większą wartość

Użyj Max (), aby zapobiec zbytnim lub małym treści, szczególnie na mniejszych ekranach lub gdy zawartość potrzebuje minimalnego rozmiaru, aby pozostać czytelna lub funkcjonalna. Jest to idealne dla układów, które nie powinny kurczyć się poza pewnym punktem na małych ekranach (wartość stała), ale może się rozwijać, aby pomieścić większe przestrzenie (o wartości względnej).

 width: max(80%, 300px); 

W tym przykładzie szerokość elementu zawsze będzie większą opcją: 80% jego pojemnika lub 300px. Na mniejszych ekranach lub w ciasnych pojemnikach, jeśli 80% oblicza się na mniej niż 300 px, element będzie nadal miał co najmniej 300 px. Na większych ekranach element rozszerzy się do 80% szerokości pojemnika, ale nigdy nie zmniejszy się poniżej 300px. Takie podejście pomaga zapewnić, że element pozostaje użyteczny na małych ekranach, jednocześnie skalując się na większych.

Po co łączyć wartości względne i stałe w min () i max ()?

Kiedy po raz pierwszy napotkasz Min () lub Max () w CSS, możesz zastanawiać się, dlaczego często łączą wartości takie jak procent i piksel. To dlatego, że każdy typ jednostki odgrywa inną rolę w responsywnym projektowaniu.

Na przykład Min (100px, 200px) zawsze rozwiąże się do 100px. Po prostu wybiera najmniejsze z dwóch stałych wartości. Ale kiedy mieszasz jednostki, takie jak Min (100%, 500px), mówisz przeglądarce: „Użyj, która wartość jest mniejsza między 100% szerokości rodzica do 500px”. To sprawia, że ​​jest to responsywne.

Względne jednostki, takie jak %, VW i EM, dostosowują się na podstawie kontekstu - czy to element nadrzędny, rzutnia, czy dziedziczne rozmiary czcionek. Stałe jednostki, takie jak PX, pozostają stałe w CSS, co czyni je przewidywalnymi.

Łącząc wartości stałych i względnych, Min () i Max () pozwalają budować elastyczne projekty, które dostosowują się przy jednoczesnym wymuszaniu granic wielkości.

Jak używać min () i max () z Divi

Teraz, gdy omówiliśmy podstawy Min () i Max (), omówmy kilka przykładów.

1. Responsywne szerokości wierszy z mniejszą liczbą pól

Zawsze byłeś w stanie ustawić szerokość i maksymalną szerokość na elementach kontenera z Divi. Ale otwierając funkcje CSS, takie jak Min () i Max (), możesz zrobić to samo, ale użyć jednego pola projektowego (i wyjść nieco mniej CSS na swojej stronie).

W Divi, jeśli przejdziesz do elementu (w naszym przypadku, wiersza), zakładce projektowej , a następnie do rozmiaru , znajdziesz kilka opcji dostosowania szerokości. Wykonując szerokość 95% i ustawiając maksymalną szerokość na 900px, masz coś, co wygląda dobrze na urządzeniach mobilnych, ale daje również układ z dużą ilością negatywnej przestrzeni po lewej i prawej stronie na wyświetlacze stacjonarne.

To tak, jakby używać CSS w rzędach:

 .container {
width: 95%;
max-width: 900px;
} 

Dzięki zaawansowanym jednostkom Divi 5 masz teraz kolejną, bardziej skonsolidowaną opcję. Możesz wprowadzić wszystko, czego potrzebujesz tylko w polu szerokości i osiągnąć ten sam wynik.

To tak, jakby używać tego CSS na pojemniku rzędowym:

 .container {
width: min(95%, 900px);
} 

To jedna linia CSS w porównaniu do dwóch linii. Co ważniejsze, wymaga jednego kroku i wartości za każdym razem, gdy użyjesz min () zamiast ustawienia szerokości i maksymalnej szerokości. Każda opcja osiąga ten sam wynik, jak pokazano w tym filmie:

Ten szczególny przypadek użycia nie jest tak ekscytujący, ale pokazuje moc Min () i Max () oraz sposób, w jaki może zastąpić starsze deklaracje CSS.

Podczas używania Min () lub Max () do odstępu, rozmiarów lub granic (można je używać na większej liczbie pól w Divi 5), zdecydowanie zalecam ustawienie ich w ustawieniach wstępnych grup lub wstępnych elementów. W ten sposób możesz uzyskać spójne skalowanie bez względu na to, gdzie ich używasz.

2. Wyściółka i szerokość obramowania

Poniżej mam projekt, który uzasadnia większą wewnętrzną wyściółkę i większą szerokość granicy, ponieważ rozmiary ekranu stają się większe. Aby to uwzględnić, użyłem funkcji Max () do ustawiania prawej/lewej/górnej/dolnej szerokości granicy i wyściółki w rzędzie. CSS byłby mniej więcej tak:

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

Oznacza to, że funkcja max () wybierze w zależności od tego, w jakiej to jest większa sytuacja. Najmniejsza wyściółka z każdej strony wynosi 10px, a największa to 2VW. Podobnie, dla szerokości granicy, najmniejszy, jaki kiedykolwiek będzie, to 5px, a największy to 1 ww).

Oto jak wygląda Max () w tej sytuacji w projektowaniu> Odstęp> Wypośnienie w rzędzie w Divi:

Oto jak wygląda Max () w tej sytuacji w projektowaniu> granica>szerokość granicyw rzędzie w Divi:

Razem mam wpływ mniej wyściółki na wewnętrznej stronie rzędu i cieńszej szerokości obramowania na mniejszych ekranach. Ale skaluje się, gdy rozmiary ekranu stają się większe, a wartość VW (pamiętaj, że jest to wartość względna) staje się większa niż stała wartość piksela.

Pomaga to zmaksymalizować dostępność mniejszych ekranów, a szersze ekrany mogą bardziej wypełnić przestrzeń.

3. Sekcje bohaterów na pełnej wysokości

Korzystając z wartości min () na wysokości sekcji, możesz utworzyć sekcję bohatera, która jest co najmniej określona wysokość, ale w przeciwnym razie pasuje do 90% wysokości pełnego ekranu (i nie więcej) za pomocą prostej funkcji min ().

 height: min(800px, 90vh) 

Ma to wpływ na sekcję bohatera o pełnej wysokości, z wyjątkiem większych (wyższych) ekranów, które następnie pokazałyby następną sekcję poniżej. W ustawieniach rozmiarów Divi można to zrobić za pomocą dwóch różnych wejść pola (szerokość i maksymalna szerokość), ale przy użyciu funkcji min () możemy uzyskać ten sam efekt przy użyciu tylko jednego pola w rozmiarze.

Utrzymuje sekcję bohatera jako główną rzeczą dla większości rozmiarów ekranu, ale nie staje się zbyt duży w kilku przypadkach z wyższymi rozdzielczościami ekranu.

4. Rozmiar czcionki

Używanie MIN lub MAX dla rozmiarów czcionek może pomóc w osiągnięciu bardziej dynamicznego rozmiaru niż statyczne wartości pikseli. W tym celu chcesz użyć Max () do skalowania rozmiaru czcionki w oparciu o warunki wielkości ekranu. Ustaw wartość Pixel/REM na mały rozmiar bezwzględny, którego chcesz użyć, i użyj wartości względnej do skalowania w górę.

1REM jest równy rozmiarowi czcionki głównej (zazwyczaj 16px, chyba że jest dostosowany w stylach witryny); Rozmiar czcionki maks. (1REM, 2 wW) przyjąłby większą z dwóch wartości i nigdy nie byłaby mniejsza niż 16px.

Jak widać, na najmniejszych urządzeniach rozmiar czcionki jest ustawiony na 1rem/16px. W pewnym momencie większa wartość staje się 2VW i skaluje rozmiar czcionki w górę, dzięki czemu czcionka jest większa, gdy rozmiary ekranu stają się większe.

Do rozmiarów czcionek nie zalecam używania Min lub Max, ale zamiast tego Clamp (). Min/Max zapewnia dynamiczne skalowanie tylko w jednym kierunku, a aby zbliżyć się do efektu Clamp (), musisz ustawić reguły rozmiaru czcionek MIN/Max w wielu punktach przerwania (co jest możliwe, ale znacznie łatwiejsze do użycia zacisku).

Różnica między min ()/max () i clamp ()

Możesz zrozumieć Clamp () jako kombinację min () i max () o preferowanej wartości pomiędzy nimi. Clamp () przyjmuje jedną wartość dla minimalnej czapki, jedna wartość jako maksymalna nasadka i trzecia wartość (w środku) jako preferowaną wartość, która określa nachylenie zmiany między min a maksymalnym.

Przykład:

 font-size: clamp(16px, 4vw, 40px); 

Oznacza to, że ustawiony rozmiar czcionki nigdy nie będzie mniejszy niż 16px lub większy niż 40px. Jednak zmienia się szybkość (na podstawie wielkości ekranu) jest określana przez preferowaną wartość w centrum.

Przeczytaj mój dedykowany artykuł o użyciu Clamp (), aby zobaczyć mój preferowany generator typografii płynów, który tworzy dla Ciebie funkcje Clamp ().

Spróbuj min () i max () z Divi 5

Min () i Max () mogą nie zwrócić tak dużej uwagi jak Clamp () lub calc (), ale są to niezbędne narzędzia do mądrzejszych, prostszych i czystszych responsywnych projektów w Divi 5.

Te funkcje CSS dają unikalne sposoby kontrolowania reakcji Twojej witryny. Gdy zrozumiesz, kiedy użyć Min () i Max (), zastanawiasz się, w jaki sposób zarządzałeś responsywnym projektem bez nich. Są w pełni wspierani w nowoczesnych przeglądarkach, a Divi sprawia, że ​​wdrażanie ich jest proste. Divi 5 jest gotowy do użycia na nowych stronach internetowych.