Przesuń suwak szerokości viewportu i zobacz, jak calc(), min(), max() i clamp() przeliczają się na piksele. Do tego vh kontra svh, lvh i dvh, fit-content i min-content na żywo, gap oraz przepisy na płynną typografię.
Funkcje matematyczne CSS pozwalają jednej wartości dopasować się do ekranu. calc() łączy jednostki, jak w calc(100% - 2rem). min() wybiera najmniejszą opcję, więc width: min(100%, 640px) nigdy nie wychodzi poza kontener. max() wybiera największą, a clamp(min, preferred, max) utrzymuje płynną wartość między dwiema granicami. dvh, w przeciwieństwie do zwykłego vh, podąża za zmieniającym się paskiem narzędzi przeglądarki mobilnej.
Która funkcja do jakiego zadania
Zadanie
CSS
Pełna szerokość minus stały margines
width: calc(100% - 2rem)
Kolumna ograniczona do 640px
width: min(100%, 640px)
Padding, który nigdy nie spada poniżej 1rem
padding: max(1rem, 4vw)
Nagłówek skalowany między 2rem a 3.5rem
font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem)
Sekcja hero wypełniająca widoczny ekran telefonu
min-height: 100dvh
Zamiast zmieniać rozmiar przeglądarki, aby przetestować formułę, przesuń symulowaną szerokość viewportu, a każda funkcja przeliczy się na piksele na Twoich oczach, z zaznaczonym punktem, w którym clamp() dochodzi do swoich granic. Strona pokazuje też, co mierzą vh, svh, lvh i dvh na telefonie, oraz jak słowa kluczowe rozmiaru wewnętrznego działają na prawdziwych pudełkach.
Przesuń suwak szerokości viewportu od rozmiaru telefonu aż do szerokiego monitora.
Dostosuj wartość minimalną, preferowaną i maksymalną formuły clamp() i obserwuj wynik w pikselach.
Porównaj wiersze min(), max() i calc() przeliczane przy tej samej szerokości.
Skopiuj formułę, a potem wypróbuj pudełka z rozmiarem zależnym od treści i przykłady gap poniżej.
Spacje wokół + i - wewnątrz calc() są wymagane. calc(100%-2rem) jest niepoprawne; calc(100% - 2rem) działa.
Zostaw człon w rem w środku płynnego clamp() dla czcionki, aby tekst nadal reagował, gdy czytelnik powiększa stronę lub zmienia domyślny rozmiar.
min() i max() na początku wydają się działać odwrotnie: min() ustala rozmiar maksymalny, bo zawsze bierze mniejszą wartość.
Używaj dvh dla sekcji pełnoekranowych oszczędnie, bo jego wartość zmienia się wraz z ruchem paska narzędzi i może przesuwać treść podczas przewijania. svh to stabilny wybór.
Najczęściej zadawane pytania
Czym różnią się vh, svh, lvh i dvh?
Na telefonach pasek narzędzi przeglądarki rośnie i się kurczy. svh to 1% małego viewportu, z widocznym paskiem. lvh to 1% dużego viewportu, z ukrytym paskiem. dvh śledzi ten, który jest aktualny, i aktualizuje się podczas przewijania. Klasyczne vh zwykle równa się lvh, dlatego sekcje 100vh są na urządzeniach mobilnych przycinane.
Czy clamp(), min() i max() są obsługiwane wszędzie?
Tak, wszystkie trzy działają w każdej głównej przeglądarce od 2020 roku. Małe, duże i dynamiczne jednostki viewportu pojawiły się później, w 2022 roku, i są już we wszystkich aktualnych głównych przeglądarkach. Dodaj przed nimi linię zastępczą ze zwykłym vh, jeśli nadal obsługujesz starsze urządzenia.
Jak zapisać płynny rozmiar czcionki przez clamp()?
Wybierz rozmiar dla wąskiego ekranu i dla szerokiego ekranu, a potem zapisz clamp(small, preferred, large). Wartość preferowana łączy rem i vw, na przykład 1rem + 2vw, więc rozmiar rośnie z oknem, ale zostaje między dwiema granicami. Laboratorium poniżej pokazuje dokładne szerokości, przy których granice przejmują kontrolę.
Co robi fit-content?
width: fit-content dopasowuje pudełko do treści, jak ściśle opięty inline-block, ale nigdy nie jest szersze niż dostępna przestrzeń. To samo co min(max-content, max(min-content, available space)). Funkcja fit-content() w ścieżkach siatki robi to samo z wybraną przez Ciebie granicą.
Czy gap działa z flexboxem?
Tak. gap, row-gap i column-gap działają w kontenerach flex we wszystkich aktualnych przeglądarkach, nie tylko w grid. Odstęp jest dodawany tylko między elementami, nigdy przy zewnętrznych krawędziach, co jest prostsze niż marginesy na każdym dziecku.
Jak przeliczane jest calc()
calc() czeka z przeliczeniem do momentu układania strony, więc może łączyć procent zależny od rodzica z wartością w rem lub pikselach. Możesz zagnieżdżać calc() w min(), max() i clamp() oraz używać w nim zmiennych CSS, na przykład calc(var(--gutter) * 2).
Mnożenie i dzielenie wymagają co najmniej jednej zwykłej liczby: calc(2 * 1rem) jest w porządku, calc(1rem * 1rem) już nie. Dzielenie przez zero sprawia, że deklaracja jest niepoprawna.
Rozmiary wewnętrzne: min-content, max-content i fit-content
min-content to najmniejsza szerokość, jaką pudełko może mieć bez wychodzenia poza kontener, zwykle szerokość najdłuższego słowa lub najszerszego obrazu. max-content to szerokość, jaką zajęłoby, gdyby tekst nigdy się nie zawijał. Oba przydają się w ścieżkach siatki i w etykietach, które mają przylegać do tekstu.
fit-content leży pomiędzy nimi: jest tak szerokie, jak chce treść, ale zawija się, gdy kontener jest węższy. To prosty sposób na wyśrodkowanie dopasowanego do treści pudełka przez margin-inline: auto.
Płynne odstępy, nie tylko płynna typografia
Ten sam trik z clamp() działa dla paddingu, marginesów i odstępów. Sekcja z padding-block: clamp(2rem, 6vw, 6rem) ma przestrzeń na dużych ekranach i nie marnuje miejsca na telefonie.
Zdefiniuj płynne wartości raz jako zmienne CSS, na przykład --space-m i --step-2, i używaj ich wszędzie. Późniejsza zmiana skali oznacza wtedy edycję jednej linii zamiast szukania po komponentach.
vh kontra svh, lvh i dvh
Jednostki procentowe viewportu
Jednostka
1 jednostka to
Zmienia się przy przewijaniu?
Do czego
vh / vw
1% viewportu (na urządzeniach mobilnych zwykle dużego)
Nie
Układy desktopowe, wartość zastępcza dla starszych przeglądarek
svh / svw
1% małego viewportu, paski narzędzi widoczne
Nie
Sekcje pełnoekranowe, które nigdy nie mogą być zasłonięte
lvh / lvw
1% dużego viewportu, paski narzędzi ukryte
Nie
Tła, które mają pokryć wszystko
dvh / dvw
1% aktualnego viewportu
Tak
Układy, które mają śledzić pasek narzędzi
vmin / vmax
1% krótszego lub dłuższego boku
Nie
Kwadratowe elementy pasujące do każdej orientacji
cqi / cqw
1% rozmiaru liniowego kontenera
Razem z kontenerem
Komponenty wewnątrz container queries
Bezpieczna na mobile sekcja hero na pełną wysokość
Pierwsza linia to wartość zastępcza dla przeglądarek bez nowszych jednostek. Druga nadpisuje ją tam, gdzie są obsługiwane.
Przykłady calc(), min(), max() i clamp()
Czytelna kolumna bez media query
min() ogranicza szerokość; padding używa max(), więc nigdy nie spada poniżej 12px. Obie reguły same dostosowują się do szerokości ramki.
calc() dla stałego paska bocznego obok płynnej treści głównej
Główny obszar zajmuje wszystko, co zostaje po pasku bocznym 120px i odstępie 12px.
min-content, max-content i fit-content
Słowa kluczowe rozmiaru wewnętrznego
Słowo kluczowe
Szerokość staje się
Tailwind
Najdłuższym niepodzielnym słowem lub najszerszym obrazem
Całą treścią w jednej linii, nawet jeśli wychodzi poza kontener
max-content, ale nie szersza niż dostępna przestrzeń
fit-content(300px) w grid
Jak fit-content z limitem 300px
grid-cols-[fit-content(300px)_1fr]
gap we flex i grid
Ten sam gap w zawijającym się wierszu flex i w siatce
row-gap i column-gap mogą się różnić. Żaden nie dodaje przestrzeni przy zewnętrznych krawędziach.
Płynna skala typografii i odstępów
Mała płynna skala jako zmienne CSS
Każdy stopień rośnie mniej więcej od telefonu 360px do desktopu 1280px. Dostosuj liczby w laboratorium powyżej.
Laboratorium viewportu
Symulowana szerokość viewportu (px)
Płynny nagłówek przy {px}px
Przeliczone wartości przy symulowanej szerokości
Funkcja
Deklaracja
Przy {vp}px
minimum clamp (rem)
maksimum clamp (rem)
preferowana: część rem
preferowana: część vw
Maksimum jest mniejsze od minimum, więc minimum wygrywa przy każdej szerokości.
Zostaje na {min}rem do szerokości około {from}px, rośnie do około {to}px, a potem trzyma się {max}rem.
Bez części vw wartość nigdy nie zmienia się wraz z oknem.
Kopiuj
Co pokrywa 100 każdej jednostki na telefonie
Trzy telefony: 100svh wypełnia przestrzeń między widocznymi paskami narzędzi, 100lvh wypełnia cały ekran, jakby paski były ukryte, 100dvh podąża za zmieniającymi się paskami
paski widoczne
paski ukryte
podąża za paskami
Szare pasy to paski narzędzi przeglądarki. Niebieski to obszar, który wypełnia 100 jednostek.