IN DEZE HANDLEIDING:
Min/Max breedte en hoogte gebruiken in CSS
Zelfs als u net begint met CSS, hebt u de eigenschappen hoogte en breedte waarschijnlijk al vaak gebruikt.
Maar u hebt waarschijnlijk gemerkt dat deze eigenschappen onnodige beperkingen kunnen opleggen aan uw pagina-elementen. U kunt er dus baat bij hebben om verwante eigenschappen te kennen en te gebruiken die het voorvoegsel “min” en “max” gebruiken.
min-breedte / min-hoogte in pixels
De eigenschappen min-breedte en min-hoogte accepteren eenheidswaarden op precies dezelfde manier als de eigenschappen hoogte en breedte, dus er is geen verschil in de syntaxis. U kunt elke aanvaardbare eenheid gebruiken, inclusief pixels, ems en percentages.
Deze eigenschappen worden gebruikt om de browser te vertellen dat een element op een “minimale” grootte moet worden weergegeven. Hier is een voorbeeld met beide:
.element {
min-height: 250px;
min-width: 250px;
}
Een element op blokniveau met bovenstaande CSS zou op zijn minst afmetingen hebben van 250×250 pixels – zelfs als het element leeg was. Maar omdat elementen op blokniveau standaard uitzetten om in de beschikbare ruimte te passen, heeft in veel gevallen alleen de min-hoogte waarde effect.
Om het effect van min-breedte te zien, zou je een float aan het element kunnen toevoegen. Hier is een demonstratie. Probeer de float in dat voorbeeld te verwijderen, en je zult zien dat het element uitzet zodat het op de pagina past.
max-breedte / max-hoogte in procent
Net als de “min”-eigenschappen accepteren max-width en max-height de gebruikelijke eenheidswaarden. Maar deze keer stellen deze eigenschappen, in plaats van een minimumgrootte voor een element, de maximumgrootte in. Hier is nog een eenvoudig voorbeeld:
.element {
width: 15%;
height: 15%;
max-height: 250px;
max-width: 250px;
}
Merk op dat ik deze keer procentuele waarden heb opgegeven voor de breedte en hoogte, maar dat ik de maximale breedte en hoogte heb beperkt tot 250px. De breedte van “15%” wordt berekend op basis van de grootte van het parent element (dus 15% van de parent). Maar zelfs als het parent element 5000px breed is, zal de .element box niet breder worden dan 250px, wat de maximale breedte is die we hebben ingesteld.
min-breedte / max-hoogte met clamp en CSS
Nu responsief ontwerp evolueert en steeds genuanceerder wordt, evolueert CSS zelf voortdurend en biedt het auteurs meer controle. De functies min(), max() en clamp(), die nu in alle moderne browsers worden ondersteund, behoren tot de nieuwste hulpmiddelen bij het dynamischer en responsiever maken van websites en apps.
Als het gaat om flexibele en vloeiende typografie, het gecontroleerd wijzigen van de grootte van elementen en het handhaven van de juiste spatiëring, kunnen min(), max() en clamp() helpen.
Voorbeeld min max clamp
Volgens The Elements of Typographic Style van Robert Bringhurst “wordt alles van 45 tot 75 tekens algemeen beschouwd als een mooie regellengte voor een pagina in één kolom met een schreefletter in een tekstformaat”.
Om ervoor te zorgen dat uw tekstblokken niet smaller zijn dan 45 tekens of breder dan 75 tekens, gebruikt u clamp() en de eenheid ch (0-breedte tekenvoorschot):
p {
width: clamp(45ch, 50%, 75ch);
}Hierdoor kan de browser de breedte van de paragraaf bepalen. De breedte wordt ingesteld op 50%, tenzij 50% kleiner is dan 45ch, dan wordt 45ch gekozen, en visa versa voor als 50% breder is dan 75ch. In deze demo wordt de kaart zelf ingeklemd.
Minimale en maximale breedte voor afbeeldingen
Zo maak je minimale en maximale breedte voor afbeeldingen:
.afbeelding {max-width:clamp(250px,25vw,500px)!important;}
Font-size min max clamp
Met clamp() kun je dit duidelijker schrijven. In plaats van een complexe string nodig te hebben, kan de browser het werk voor je doen. Stel de minimaal aanvaardbare lettergrootte in (bijvoorbeeld 1,5rem voor een titel, maximale grootte (d.w.z. 3rem) en de ideale grootte van 5vw.
Nu krijgen we typografie die meeschaalt met de viewportbreedte van de pagina tot ze de beperkende minimum- en maximumwaarden bereikt, in een veel beknoptere regel code:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}