Beheersing van responsief webdesign met CSS-wiskundige functies

Wiskunde is goed, wiskunde is geweldig, maar wil je je tijd besteden aan het maken van berekeningen terwijl je stylesheet het voor je kan doen?

CSS wordt geleverd met drie handige wiskundige functies die de manier waarop u uw websites ontwerpt, zullen veranderen. We laten u zien hoe en waarom u ze moet gebruiken.

Introductie van wiskunde in CSS

CSS is voornamelijk declaratief, maar revisies hebben functies in de taal geïntroduceerd. Er zijn nu veel functies in de specificatie en drie van de eenvoudigste wiskundige kunnen erg handig zijn: calc, max en min.

Je kunt gebruiken dit eenvoudige CodePen-voorbeeld om de gids te helpen volgen.

CSS calc() Wiskundige functie

De functie CSS calc() voert een eenvoudige berekening uit en gebruikt het resultaat als een eigenschapswaarde. Dit betekent dat u dynamische waarden kunt toewijzen aan eigenschappen zoals hoogte en breedte, allemaal zonder CSS @media-query's.

Deze functie ondersteunt optellen (+), vermenigvuldigen (*), aftrekken (-) en delen (/) met een enkele operator.

Voorbeeld: Gelijkmatige afstanden over schermformaten creëren

Het kan moeilijk zijn om een ​​webpagina er in verschillende formaten hetzelfde uit te laten zien, zelfs als u dynamische CSS-eenheden zoals vw en % gebruikt. De CSS calc() functie verandert dit.

Zoals je in de bovenstaande afbeelding kunt zien, heeft de titelbalk die over het scherm loopt een verschillende tussenruimte, afhankelijk van de schermgrootte. Dit komt omdat we de breedte hebben ingesteld op 80vw en de afstand hebben ingesteld op 20vw; een variabele waarde.

Als we in plaats daarvan calc() gebruiken, kunnen we de afstand zo instellen dat deze voor elke schermgrootte hetzelfde is. De eigenschap die we hiervoor gebruiken ziet er als volgt uit:

breedte: calc (100vw - 400px);

Dit stelt de breedte van onze titelbalk in op 400px minder dan de breedte van de pagina, waardoor er een gelijkmatige tussenruimte ontstaat, ongeacht de grootte van het scherm.

CSS max() Wiskundige functie

De functie CSS max() selecteert de hoogste waarde uit een pool om een ​​waarde toe te voegen aan een CSS-eigenschap. U kunt zoveel potentiële waarden toevoegen als u wilt, elk gescheiden door een komma, maar alleen de hoogste wordt gebruikt.

Voorbeeld: de hoogte van de navigatiebalk beperken

Een van de belangrijkste uitdagingen bij responsive webdesign is oriëntatie. Een site die werkt op een groot staand computerscherm moet er ook goed uitzien op een kleiner staand mobiel scherm.

Hierdoor kan een eigendomswaarde er geweldig uitzien op desktop en slecht op mobiel, net zoals de afbeelding hierboven laat zien. Onze navigatiebalk heeft een ingestelde hoogte van 10vh, maar hierdoor ziet de balk er dun uit op desktopapparaten.

We kunnen de CSS max()-functie gebruiken om dit probleem op te lossen:

hoogte: max (10vh, 80px);

Door een regel als deze toe te voegen, kunnen we een minimale hoogte van 80px instellen voor onze navigatiebalk, terwijl we de waarde van 10vh behouden als deze hoger is.

CSS min() wiskundige functie

De functie min() lijkt op de functie max(), maar kiest de laagste waarde uit een pool om als eigenschapswaarde te gebruiken.

Voorbeeld: een maximale tekstgrootte instellen

Of u nu een dynamische waarde gebruikt of niet, tekstgrootte op verschillende platforms krijgen kan lastig zijn. We kunnen de CSS min()-functie gebruiken om twee of meer potentiële eigenschapswaarden in te stellen voor onze hoofdtekstgrootte, en het zal de kleinste gebruiken.

Gebruik maken van een lettergrootte: 10vh; eigenschap op de hoofdkoptekst in ons voorbeeld zorgt ervoor dat de tekst er geweldig uitziet op desktop, maar veel te groot op mobiele apparaten.

Om dit te wijzigen, kunt u de CSS min()-functie gebruiken om alternatieve grootte aan te bieden:

lettergrootte: min (10vh, 10vw);

Dit voorbeeld werkt omdat mobiele schermen lang en dun zijn, terwijl desktopmonitoren breed en kort zijn. Dit betekent dat de weergavebreedte-eenheid (vw) kleiner is op mobiel dan op desktop.

Wiskunde gebruiken voor responsive webdesign

De wiskundige functies die voorverpakt met CSS worden geleverd, bieden een unieke manier om gemakkelijk responsieve websites te maken. U hoeft ze alleen maar correct in te stellen om aan de slag te gaan.

Natuurlijk zijn er andere methoden en CSS-functies die u kunt gebruiken om een ​​site te maken die er op alle platforms goed uitziet.

Een responsieve navigatiebalk bouwen met HTML en CSS

Lees volgende

Over de auteur