min(), max() ja clamp() joustaviin arvoihin
Rajoittakaa arvot minimi- ja maksimiarvojen väliin min()-, max()- ja clamp()-funktioilla.
min(), max() ja clamp() joustaviin arvoihin on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Miksi vertailufunktioita käytetään?
CSS:n vertailufunktioilla (min(), max(), clamp()) voidaan määrittää kontekstiin mukautuvia responsiivisia kokoja ilman media queryja — näin toteutus on tyylikkäämpi ja ytimekkäämpi kuin breakpointteihin perustuvilla ratkaisuilla.
min() — valitse pienin
min(a, b, ...) arvioi kaikki argumentit ja käyttää pienintä arvoa. ”Pienin” tarkoittaa tässä visuaalista tulosta eli eniten rajoitettua vaihtoehtoa.
<div class="container">Container</div>max() — valitse suurin
max(a, b, ...) valitsee suurimman arvon ja varmistaa näin, että vähimmäistaso saavutetaan aina.
<p>Responsive text</p>clamp(min, preferred, max)
clamp() rajoittaa arvon tietylle välille. Ensisijainen arvo eli keskimmäinen argumentti on yleensä joustava. Minimi- ja maksimiarvo määrittävät ehdottomat rajat.
<h1>Clamped Heading</h1>clamp() ja joustava typografian asteikko
Korvaa useat breakpoint-kohtaiset ylikirjoitukset yhdellä clamp()-funktiolla otsikkotasoa kohden:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>clamp() ja joustavat välit
Käytä joustavaa mitoitusta myös padding-, margin- ja gap-arvoissa — tämä on keskeinen tekniikka ”intrinsic”-suunnittelussa:
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>min() leveyden rajoittimena
Selkein säilömalli: leveys on aina 90 % näkymäalueesta mutta enintään 1200px, kaikki yhdellä lausekkeella:
<div class="wrapper">Wrapper</div>max() fonttikoon vähimmäisarvona
Varmista, ettei leipätekstistä tule liian pientä pienillä näkymäalueilla:
<p class="text-body">Body text that never gets too small.</p>min-, max- ja clamp-funktioiden sisäkkäisyys
Näitä funktioita voi käyttää sisäkkäin monimutkaisten rajoitusten määrittämiseen:
<div class="element">Padded element</div>Vertailufunktiot Gridissä
Käytä min()-funktiota minmax()-funktion sisällä turvallisemman sarakkeen vähimmäisleveyden määrittämiseen:
<div class="grid"><div>Card</div></div>Selaintuki
Kaikilla kolmella vertailufunktiolla on täysi tuki nykyaikaisissa selaimissa (Chrome 79+, Firefox 75+, Safari 11.1+). Selainkohtaisia etuliitteitä ei tarvita.
Pikatarkistus
Otsikossa käytetään arvoa font-size: clamp(1rem, 3vw, 2.5rem). Millä näkymäalueen leveydellä 3vw vastaa arvoa 1rem, kun juurielementin kooksi oletetaan 16px?
Kertaus
min() valitsee pienemmän arvon eli ylärajan. max() valitsee suuremman arvon eli alarajan. clamp(min, preferred, max) rajaa joustavan arvon tietylle välille. Yhdessä ne mahdollistavat joustavan typografian ja välitykset ilman media queryja. Tehokkain malli on clamp(1.5rem, 4vw, 3rem), jolla otsikot mukautuvat automaattisesti responsiivisesti.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”min(), max() ja clamp() joustaviin arvoihin” ilmainen?
Kyllä – oppitunnin ”min(), max() ja clamp() joustaviin arvoihin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”min(), max() ja clamp() joustaviin arvoihin”?
Rajoittakaa arvot minimi- ja maksimiarvojen väliin min()-, max()- ja clamp()-funktioilla. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”min(), max() ja clamp() joustaviin arvoihin”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- calc() dynaamisiin laskutoimituksiin
- min(), max() ja clamp() joustaviin arvoihin
- repeat() ja minmax() Gridissä
- color-mix() ja suhteellinen värisyntaksi