Mestring af responsivt webdesign med CSS-matematikfunktioner

Matematik er godt, matematik er fantastisk, men vil du bruge din tid på at lave udregninger, når dit stilark kan gøre det for dig?

CSS kommer med tre praktiske matematiske funktioner, der vil ændre den måde, du designer dine hjemmesider på. Vi viser dig, hvordan og hvorfor du skal bruge dem.

Introduktion af matematik til CSS

CSS er hovedsageligt deklarativ, men revisioner har introduceret funktioner til sproget. Der er nu mange funktioner i specifikationen, og tre af de enkleste matematiske kan vise sig at være meget nyttige: calc, max og min.

Du kan bruge dette simple CodePen eksempel for at hjælpe med at følge guiden.

CSS calc() Matematisk funktion

CSS calc()-funktionen udfører en simpel beregning og bruger resultatet som en egenskabsværdi. Det betyder, at du kan tildele dynamiske værdier til egenskaber som højde og bredde, alle uden CSS @media-forespørgsler.

Denne funktion understøtter addition (+), multiplikation (*), subtraktion (-) og division (/) med en enkelt operator.

Eksempel: Oprettelse af jævn afstand på tværs af skærmstørrelser

Det kan være svært at få en webside til at se ens ud i forskellige størrelser, selvom du bruger dynamiske CSS-enheder som vw og %. CSS calc()-funktionen ændrer dette.

Som du kan se på billedet ovenfor, har titellinjen, der går på tværs af skærmen, forskellige mellemrum afhængigt af skærmstørrelsen. Dette skyldes, at vi har indstillet bredden til 80vw, indstillet afstanden til 20vw; en variabel værdi.

Hvis vi bruger calc() i stedet, kan vi indstille afstanden til at være den samme på tværs af enhver skærmstørrelse. Ejendommen vi bruger til dette ser sådan ud:

bredde: beregnet (100vw - 400px);

Dette indstiller bredden af ​​vores titellinje til 400px mindre end bredden på siden, hvilket skaber jævnt mellemrum uanset størrelsen på skærmen.

CSS max() Matematikfunktion

Funktionen CSS max() vælger den højeste værdi fra en pulje for at tilføje en værdi til en CSS-egenskab. Du kan tilføje så mange potentielle værdier, som du vil, med hver adskillelse med et komma, men den vil kun bruge den højeste.

Eksempel: Begrænsning af navigationsbjælkehøjde

En af de vigtigste udfordringer, der følger med responsivt webdesign, er orientering. Et websted, der fungerer på en stor portræt computerskærm, skal også se godt ud på en mindre portræt mobilskærm.

Dette kan få en ejendomsværdi til at se godt ud på desktop og dårlig på mobil, ligesom billedet ovenfor viser. Vores navigationsbar har en indstillet højde på 10vh, men dette får bjælken til at se tynd ud på stationære enheder.

Vi kan bruge funktionen CSS max() til at løse dette problem:

højde: max (10vh, 80px);

Ved at tilføje en regel som denne kan vi indstille en minimumshøjde på 80px for vores navbar, mens vi bibeholder værdien på 10vh, hvis den er højere.

CSS min() Matematikfunktion

Min()-funktionen er ligesom max()-funktionen, men den vælger den laveste værdi fra en pulje til brug som egenskabsværdien.

Eksempel: Indstilling af en maksimal tekststørrelse

Uanset om du bruger en dynamisk værdi eller ej, få tekststørrelse på tværs af platforme kan være tricky. Vi kan bruge funktionen CSS min() til at indstille to eller flere potentielle egenskabsværdier for vores hovedtekststørrelse, og den vil bruge den mindste.

Ved hjælp af en skriftstørrelse: 10vh; egenskab på hovedhovedteksten i vores eksempel får teksten til at se godt ud på skrivebordet, men alt for stor på mobile enheder.

For at ændre dette kan du bruge funktionen CSS min() til at give alternativ størrelse:

skriftstørrelse: min (10vh, 10vw);

Dette eksempel fungerer, fordi mobilskærme er høje og tynde, mens desktop-skærme er brede og korte. Det betyder, at visningsbredden (vw) enheden er mindre på mobil end på desktop.

Brug af matematik til responsivt webdesign

De matematiske funktioner, der leveres færdigpakkede med CSS, tilbyder en unik måde at producere responsive websteder på med lethed. Du skal bare konfigurere dem korrekt for at komme i gang.

Selvfølgelig er der andre metoder og CSS-funktioner, som du kan bruge til at lave et websted, der ser godt ud på tværs af platforme.

Sådan opbygger du en responsiv navigationslinje ved hjælp af HTML og CSS

Læs Næste

Om forfatteren