Mestring av responsiv webdesign med CSS Math-funksjoner

Matte er bra, matte er bra, men vil du bruke tiden din på å regne ut når stilarket ditt kan gjøre det for deg?

CSS kommer med tre nyttige matematiske funksjoner som vil endre måten du designer nettsidene dine på. Vi viser deg hvordan og hvorfor du bør bruke dem.

Vi introduserer matematikk til CSS

CSS er hovedsakelig deklarativ, men revisjoner har introdusert funksjoner til språket. Det er nå mange funksjoner i spesifikasjonen, og tre av de enkleste matematiske kan vise seg å være svært nyttige: calc, max og min.

Du kan bruke dette enkle CodePen-eksemplet for å hjelpe med å følge veiledningen.

CSS calc() matematisk funksjon

CSS calc()-funksjonen utfører en enkel beregning og bruker resultatet som en egenskapsverdi. Dette betyr at du kan tilordne dynamiske verdier til egenskaper som høyde og bredde, alt uten CSS @media-spørringer.

Denne funksjonen støtter addisjon (+), multiplikasjon (*), subtraksjon (-) og divisjon (/) med en enkelt operator.

Eksempel: Lage jevn avstand på tvers av skjermstørrelser

Det kan være vanskelig å få en nettside til å se lik ut i forskjellige størrelser, selv om du bruker dynamiske CSS-enheter som vw og %. CSS calc()-funksjonen endrer dette.

Som du kan se på bildet ovenfor, har tittellinjen som går over skjermen forskjellig mellomrom avhengig av skjermstørrelsen. Dette er fordi vi har satt bredden til 80vw, satt avstanden til 20vw; en variabel verdi.

Hvis vi bruker calc() i stedet, kan vi sette avstanden til å være den samme over alle skjermstørrelser. Egenskapen vi bruker til dette ser slik ut:

bredde: beregnet (100vw - 400px);

Dette setter bredden på tittellinjen vår til 400 px mindre enn bredden på siden, og skaper jevn avstand uansett størrelse på skjermen.

CSS max() matematisk funksjon

CSS max()-funksjonen velger den høyeste verdien fra en pool for å legge til en verdi til en CSS-egenskap. Du kan legge til så mange potensielle verdier du vil, med hver separert med komma, men den vil bare bruke den høyeste.

Eksempel: Begrensning av høyden på navigasjonslinjen

En av hovedutfordringene som følger med responsiv webdesign er orientering. Et nettsted som fungerer på en stor stående dataskjerm må også se bra ut på en mindre stående mobilskjerm.

Dette kan få en eiendomsverdi til å se bra ut på desktop og dårlig på mobil, akkurat som bildet ovenfor viser. Navigasjonslinjen vår har en innstilt høyde på 10vh, men dette får linjen til å se tynn ut på stasjonære enheter.

Vi kan bruke funksjonen CSS max() for å løse dette problemet:

høyde: maks (10vh, 80px);

Ved å legge til en regel som denne kan vi sette en minimumshøyde på 80px for navigasjonslinjen vår, samtidig som vi opprettholder verdien på 10vh hvis den er høyere.

CSS min() matematikkfunksjon

Min()-funksjonen er som max()-funksjonen, men den velger den laveste verdien fra et basseng som skal brukes som egenskapsverdi.

Eksempel: Angi en maksimal tekststørrelse

Enten du bruker en dynamisk verdi eller ikke, få tekststørrelse på tvers av plattformer kan være vanskelig. Vi kan bruke CSS min()-funksjonen til å angi to eller flere potensielle egenskapsverdier for hovedtekststørrelsen vår, og den vil bruke den minste.

Bruker en skriftstørrelse: 10vh; egenskap på hovedtekstteksten i vårt eksempel gjør at teksten ser bra ut på skrivebordet, men altfor stor på mobile enheter.

For å endre dette kan du bruke funksjonen CSS min() for å gi alternativ størrelse:

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

Dette eksemplet fungerer fordi mobilskjermer er høye og tynne, mens stasjonære skjermer er brede og korte. Dette betyr at visningsbredden (vw)-enheten er mindre på mobil enn på skrivebordet.

Bruke matematikk for responsiv webdesign

Matematiske funksjoner som leveres ferdigpakket med CSS tilbyr en unik måte å lage responsive nettsteder på med letthet. Du trenger bare å sette dem opp riktig for å komme i gang.

Selvfølgelig er det andre metoder og CSS-funksjoner du kan bruke for å lage et nettsted som ser bra ut på tvers av plattformer.

Hvordan bygge en responsiv navigasjonslinje ved hjelp av HTML og CSS

Les Neste

Om forfatteren