Sleep een slider voor de viewportbreedte en zie calc(), min(), max() en clamp() omgezet in pixels. Plus vh vs svh, lvh en dvh, fit-content en min-content live, gap en recepten voor fluid typografie.
Met CSS-rekenfuncties past één waarde zich aan het scherm aan. calc() combineert eenheden, zoals in calc(100% - 2rem). min() kiest de kleinste optie, dus width: min(100%, 640px) loopt nooit over. max() kiest de grootste, en clamp(min, preferred, max) houdt een vloeiende waarde tussen twee grenzen. dvh volgt de veranderende werkbalk van de mobiele browser, in tegenstelling tot gewone vh.
Welke functie voor welke taak
Taak
CSS
Volledige breedte min een vaste marge
width: calc(100% - 2rem)
Een kolom die stopt bij 640px
width: min(100%, 640px)
Padding die nooit onder 1rem zakt
padding: max(1rem, 4vw)
Kop die schaalt tussen 2rem en 3.5rem
font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem)
Hero die het zichtbare mobiele scherm vult
min-height: 100dvh
In plaats van uw browser te verkleinen om een formule te testen, sleept u de gesimuleerde viewportbreedte en ziet u elke functie direct omgezet in pixels, met het punt gemarkeerd waar clamp() zijn grenzen raakt. De pagina tekent ook wat vh, svh, lvh en dvh op een telefoon meten en laat de intrinsieke sleutelwoorden werken op echte vakken.
Sleep de slider voor de viewportbreedte van telefoonformaat naar een breed scherm.
Pas de minimum-, voorkeurs- en maximumwaarde van de clamp()-formule aan en bekijk het resultaat in pixels.
Vergelijk de rijen voor min(), max() en calc() die bij dezelfde breedte worden berekend.
Kopieer de formule en probeer daarna de vakken voor content sizing en de gap-voorbeelden hieronder.
Spaties rond + en - binnen calc() zijn verplicht. calc(100%-2rem) is ongeldig; calc(100% - 2rem) werkt.
Houd een rem-term in het midden van een vloeiende clamp() voor lettergrootte, zodat tekst blijft reageren als de lezer inzoomt of de standaardgrootte wijzigt.
min() en max() lijken eerst omgekeerd te werken: min() stelt een maximale grootte in, omdat het altijd de kleinere waarde neemt.
Gebruik dvh spaarzaam voor schermvullende secties, omdat de waarde verandert als de werkbalk beweegt en content tijdens het scrollen kan verschuiven. svh is de stabiele keuze.
Veelgestelde vragen
Wat is het verschil tussen vh, svh, lvh en dvh?
Op telefoons wordt de browserwerkbalk groter en kleiner. svh is 1% van de kleine viewport, met de werkbalk zichtbaar. lvh is 1% van de grote viewport, met de werkbalk verborgen. dvh volgt wat op dat moment geldt en wordt bijgewerkt terwijl u scrolt. Klassieke vh is meestal gelijk aan lvh, en daarom worden secties van 100vh op mobiel afgesneden.
Worden clamp(), min() en max() overal ondersteund?
Ja, alle drie werken sinds 2020 in elke grote browser. De kleine, grote en dynamische viewport-eenheden kwamen later, in de loop van 2022, en zitten nu in alle actuele grote browsers. Zet er een gewone vh-regel als fallback voor als u nog oudere apparaten ondersteunt.
Hoe schrijf ik een vloeiende lettergrootte met clamp()?
Kies de grootte op een smal scherm en op een breed scherm, en schrijf dan clamp(klein, voorkeur, groot). De voorkeurswaarde combineert rem en vw, zoals 1rem + 2vw, zodat de grootte meegroeit met het venster maar tussen de twee grenzen blijft. Het lab hieronder toont de exacte breedtes waarop de grenzen het overnemen.
Wat doet fit-content?
width: fit-content maakt een vak zo groot als zijn inhoud, zoals een krimpfolie-inline-block, maar nooit breder dan de beschikbare ruimte. Het is hetzelfde als min(max-content, max(min-content, beschikbare ruimte)). De fit-content()-functie in grid tracks doet hetzelfde met een grens die u zelf kiest.
Kan gap met flexbox gebruikt worden?
Ja. gap, row-gap en column-gap werken in alle actuele browsers in flex containers, niet alleen in grid. Gap wordt alleen tussen items toegevoegd, nooit aan de buitenranden, wat eenvoudiger is dan marges op elk child.
Hoe calc() wordt berekend
calc() wacht tot de layout wordt opgebouwd voordat het wordt berekend, dus het kan een percentage dat van de parent afhangt combineren met een rem- of pixelwaarde. U kunt calc() nesten in min(), max() en clamp() en er custom properties in gebruiken, zoals calc(var(--gutter) * 2).
Vermenigvuldigen en delen vereisen minstens één kaal getal: calc(2 * 1rem) is prima, calc(1rem * 1rem) niet. Delen door nul maakt de declaratie ongeldig.
Intrinsieke groottes: min-content, max-content en fit-content
min-content is de smalste breedte die een vak kan krijgen zonder over te lopen, meestal de breedte van het langste woord of de breedste afbeelding. max-content is de breedte die het zou innemen als tekst nooit afbreekt. Beide zijn handig voor grid tracks en voor labels die strak om hun tekst moeten zitten.
fit-content zit tussen die twee in: het is zo breed als de inhoud wil, maar breekt af als de container smaller is. Daarmee centreert u netjes een krimpend vak met margin-inline: auto.
Vloeiende witruimte naast vloeiende typografie
Dezelfde clamp()-truc werkt voor padding, marges en gaps. Een sectie met padding-block: clamp(2rem, 6vw, 6rem) ademt op grote schermen zonder op een telefoon ruimte te verspillen.
Definieer de vloeiende waarden één keer als custom properties, bijvoorbeeld --space-m en --step-2, en gebruik ze overal. Wilt u de schaal later aanpassen, dan wijzigt u één regel in plaats van door componenten te zoeken.
vh vs svh, lvh en dvh
Viewport-percentage-eenheden
Eenheid
1 eenheid is
Verandert tijdens scrollen?
Gebruik voor
vh / vw
1% van de viewport (op mobiel meestal de grote)
Nee
Desktoplayouts, fallback voor oudere browsers
svh / svw
1% van de kleine viewport, werkbalken zichtbaar
Nee
Schermvullende secties die nooit verborgen mogen raken
lvh / lvw
1% van de grote viewport, werkbalken verborgen
Nee
Achtergronden die alles moeten bedekken
dvh / dvw
1% van de huidige viewport
Ja
Layouts die de werkbalk moeten volgen
vmin / vmax
1% van de kortste of langste zijde
Nee
Vierkante elementen die in beide oriëntaties passen
cqi / cqw
1% van de inline-grootte van een size container
Met de container mee
Componenten binnen container queries
Een mobielveilige hero op volle hoogte
De eerste regel is de fallback voor browsers zonder de nieuwere eenheden. De tweede overschrijft die waar ze ondersteund worden.
Voorbeelden van calc(), min(), max() en clamp()
Een leesbare kolom zonder media query
min() begrenst de breedte; de padding gebruikt max() zodat die nooit onder 12px zakt. Beide regels passen zich vanzelf aan de framebreedte aan.
calc() voor een vaste zijbalk naast een vloeiend hoofdgebied
Het hoofdgebied neemt wat overblijft na de zijbalk van 120px en de gap van 12px.
min-content, max-content en fit-content
Intrinsieke sleutelwoorden voor grootte
Sleutelwoord
Breedte wordt
Tailwind
Het langste onafbreekbare woord of de breedste afbeelding
Alle inhoud op één regel, ook als die overloopt
max-content, maar niet breder dan de beschikbare ruimte
fit-content(300px) in grid
Zoals fit-content met een plafond van 300px
grid-cols-[fit-content(300px)_1fr]
gap in flex en grid
Dezelfde gap in een afbrekende flex-rij en een grid
row-gap en column-gap kunnen verschillen. Geen van beide voegt ruimte toe aan de buitenranden.
Vloeiende schaal voor typografie en witruimte
Een kleine vloeiende schaal als custom properties
Elke stap groeit tussen ongeveer een telefoon van 360px en een desktop van 1280px. Pas de getallen aan in het lab hierboven.
Viewportlab
Gesimuleerde viewportbreedte (px)
Vloeiende kop bij {px}px
Berekende waarden bij de gesimuleerde breedte
Functie
Declaratie
Bij {vp}px
clamp-minimum (rem)
clamp-maximum (rem)
voorkeur: rem-deel
voorkeur: vw-deel
Het maximum ligt onder het minimum, dus het minimum wint bij elke breedte.
Blijft op {min}rem tot ongeveer {from}px breed, groeit tot ongeveer {to}px en blijft dan op {max}rem.
Zonder vw-deel verandert de waarde nooit met het venster.
Kopiëren
Wat 100 van elke eenheid op een telefoon beslaat
Drie telefoons: 100svh vult de ruimte tussen zichtbare werkbalken, 100lvh vult het hele scherm alsof de werkbalken verborgen zijn, 100dvh volgt de werkbalken als ze veranderen
werkbalken zichtbaar
werkbalken verborgen
volgt werkbalken
Grijze banden zijn browserwerkbalken. Blauw is het gebied dat 100 eenheden vullen.