CSS Academy · leksjon

Min-, max- og clamp-funksjoner

Bruk min(), max() og clamp() til adaptiv skalering som tilpasser seg størrelsen på beholderen eller visningsområdet.

Leksjon 4 av 413 trinn

Min-, max- og clamp-funksjoner er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hvorfor bruke CSS-sammenligningsfunksjoner?

CSS-sammenligningsfunksjoner lar deg uttrykke betinget størrelsesberegning uten JavaScript: «bruk denne størrelsen, men aldri mindre eller større enn disse grensene». De er grunnlaget for moderne, flytende og responsiv utforming.

min()-funksjonen

min() returnerer den minste verdien i en kommaseparert liste. Nettleseren velger den verdien som er minst ved den gjeldende visningsstørrelsen.

<div class="container">Container width: min(800px, 90%)</div>

max()-funksjonen

max() returnerer den største verdien. Den er nyttig for å angi minimumsstørrelser som samtidig kan vokse.

<p>Text sized with max(1rem, 2vw)</p>

clamp()-funksjonen

clamp(min, preferred, max) begrenser en verdi til et intervall mellom en minimums- og en maksimumsverdi. Den foretrukne verdien er vanligvis flytende (for eksempel vw).

<h1>Clamped Heading</h1>

clamp() for flytende typografi

Flytende typografi med clamp() fjerner behovet for flere overstyringer av font-size i media queries:

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

clamp() for flytende mellomrom

Bruk samme mønster for mellomrom, slik at marginer og padding blir naturlig responsive:

<div class="section">Section with fluid padding</div>

min() for containere

Et trygt containermønster som aldri overskrider en max-width og aldri legger til horisontal rulling:

<div class="wrapper">Safe wrapper container</div>

Nesting av funksjoner

Du kan nøste sammen sammenligningsfunksjoner for komplekse uttrykk:

<p class="hero-text">Nested min/max inside clamp()</p>

calc() kombinert med clamp()

Bruk calc() i clamp() for presis flytende interpolasjon mellom to størrelser:

<h1>Precise fluid heading</h1>

min-content max-content fit-content

CSS har også nøkkelord for størrelser:

min-content: minste mulige størrelse uten overflow
max-content: tar så mye plass som innholdet trenger
fit-content(): som max-content, men begrenset til en oppgitt grense

<span class="tag">Tag label</span>

Nettleserstøtte

min(), max() og clamp() støttes i alle moderne nettlesere. Ingen prefikser er nødvendige. De kan brukes overalt der det forventes en lengde-, frekvens-, tids- eller tallverdi.

Hurtigsjekk

En overskrift bruker font-size: clamp(1rem, 4vw, 3rem) i et visningsområde som er 600px bredt. Hvor stor er skriften?

Besvar den i den interaktive leksjonen

Oppsummering

min() velger den minste verdien, mens max() velger den største. clamp(min, preferred, max) begrenser en flytende verdi innenfor angitte grenser. Disse funksjonene er grunnlaget for moderne flytende typografi og mellomrom, og fjerner ofte behovet for flere overstyringer i media queries.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Min-, max- og clamp-funksjoner» gratis?

Ja – hele teksten i «Min-, max- og clamp-funksjoner» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Min-, max- og clamp-funksjoner»?

Bruk min(), max() og clamp() til adaptiv skalering som tilpasser seg størrelsen på beholderen eller visningsområdet. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Min-, max- og clamp-funksjoner»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til CSS Academy