Morsomme Tips: Bruk calc() for å Endre Høyden på en Helt Komponent

0
12

Konseptet av Væske Typografi ble kastet rundt for et par år siden. Den viktigste ideen er at hvis du vet hvilken størrelse skrift er på to forskjellige viewport størrelser, så du kan få den skriftskalering jevnt mellom to størrelser. Vi hadde en jQuery løsning for dette i FitText (ment på overskrifter, selvfølgelig) til calc () – funksjonen ble sendt gir oss en ren CSS-løsning.

p {
font-size: calc(16px + (24 – 16)*(100vw – 400px)/(800 – 400));
}

Se Penn Væske Typografi av Martino Stenta (@martinostenta) på CodePen.

De viktigste tallene her er 24 piksler (større skrift opp til 800px viewports) og 16px (mindre skriftstørrelse ned til 400px viewports). Jeg ville ikke bruke begrepene “minimum” eller “maksimal” for å beskrive skriftstørrelser og viewports i denne sammenheng fordi det er litt misvisende. Faktisk, du fortsatt trenger for å gi en standard skriftstørrelse for viewports mindre enn 400px og større enn 800px — ellers, skrift vil bli mindre (eller større) med samme skala av ligningen. Eller, hvis du har lyst, kan du angi en annen skala for større skjerm størrelser.

Se Penn Væske Typografi med tilbakestill størrelse ved Martino Stenta (@martinostenta) på CodePen.

Det fungerer veldig bra, og du bør definitivt sjekke regnestykket bak dette.

Polstring og linje høyde?

Jeg likte konseptet av Væske Typografi så mye at jeg spurte meg selv om det kan fungere med andre egenskaper. Og det gjør det! Du kan ikke bruke en prosentandel, men så lenge du holder deg med px, em eller rem-enheter, så det er OK. Jeg er en pixel fyr, så alle mine eksperimenter har brukt de, men det er denne ryddig generatorthat hjelper deg med konverteringer hvis du trenger det.

Så, tilbake til polstring og line-height. Ved hjelp av den samme calc() logikk, kan vi oppnå et fullt væske *layout* med faste verdier for definerte skjermstørrelser.

Se Penn Ren CSS Variabel Polstring, skriftstørrelse og Linje Høyde ved Martino Stenta (@martinostenta) på CodePen.

Jeg implementerte dette idé på dette nettstedet, men holdt det for skrift-størrelse og line-height. Og, ja, det blir lettere å se forbi alt det matte og sette til å bruke mer du arbeider med det.

Se Pennen Fungerer Eksempel på calc() på skrift-størrelse og linje-hieght av Martino Stenta (@martinostenta) på CodePen.

En digresjon om “Helten” komponenter

Hvis du er som meg, så kan du ta problemet med hva vi alle har lært å kjenne som den helten komponent. Det er allestedsnærværende i den grad at det er blitt et fast innslag i design-systemer (som Bootstrap) og du har kanskje selv sett det satirized på nettsteder som dette.

Min største gripe bekymringer den beste måten å gjøre dem bedre reaksjonsevne. Hvis det ikke er en *full skjerm* helten (dvs. overtar hele viewport på hvilken som helst størrelse), så jeg pleier å be designer hvordan siden skal oppføre seg. Det er ofte en del av helten side som fungerer fint, slik at tillater meg å bruke padding-bottom i % med absolutt posisjonering av indre innhold. Denne taktikken fungerer mesteparten av tiden,

Dette er moro, og det fungerer fint, spesielt på skrivebordet versjonen av en nettside. Du ende opp med en ryddig helten delen, er andelen som er god og innhold er sentrert.

Se Penn, Standard helt avsnitt med “padding-bottom’ ved Martino Stenta (@martinostenta) på CodePen.

Men hva skjer når du begynner å krympe viewport? Helten forblir leselig opp til et punkt, du virkelig trenger å endre andelen.

Forutsatt at vi arbeider med et desktop-første lydhør tilnærming, vi kunne begynne med en horisontal rektangel som vekter ned til det punktet hvor vi sitter du igjen med en vertikal rektangel på små skjermer.

Helten komponent med forskjellige proporsjoner basert på enheten

Dette er en PITA fordi du kan ende opp med mange linjer av CSS for å få en fin og lesbar helt avsnitt på ulike stoppunkter.

Det må være en bedre måte, ikke sant? Hva hvis helten kunne øke sin høyde mens siden bredden blir smalere?

Tilbake til flyt!

Så, jeg vendte tilbake til calc () – funksjonen som jobbet i de andre situasjoner, som å gjøre nettleseren håndtere matematikk og skala tilsvarende ting som viewport endringer.

Her er CSS fra Væske Typografi eksempel vi startet med:

p {
bredde: 100%;
maks bredde: 1200px;
margin: 0 auto;
font-family: ‘Åpne Sans’, sans-serif;
font-size: calc(24 piksler + (18 – 24)*(100vw – 400px)/(1200 – 400));
line-height: 1.5;
padding: 10px;
}

Her er hva vi ønsker: en helt komponent som blir større mens du krympe siden. Jeg brukte pixel enheter for flytende del og prosenter overalt ellers.

Her er en screencast av hvordan løsningen jeg landet på:

Live-Demo

Dette er ganske nyttig når du ønsker å gi mer vertikal plass til tekst. Krymper viewport bredde fra stor til liten vil ende opp med å ha flere linjer for den samme teksten, siden skriftstørrelsen kan ikke være for små.

Se Pennen Helt avsnitt med calc() ved Martino Stenta (@martinostenta) på CodePen.

Ganske fin, ikke sant? Ennå en annen måte calc() viste at det kan løse et scenario for meg.

Ja, det er noen begrensninger

Nettleserstøtte er veldig bra, tallying nesten 93% av brukerne (i skrivende stund), med de viktigste unntaket er Opera mini.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
19* 15 4* 10 12 6*

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 46 Ingen 67 69 62

Husk også at dette calc() teknikk støtter bare px, em, og rem-enheter. Men eksemplene vi dekket her er ganske enkelt å konvertere enheter for ting som padding-bottom prosenter til punkter siden helten er vanligvis 100% i bredden.

Oh! Og husk å tilbakestille verdiene før og etter de svake punktene i calc () – funksjonen. Ellers vil du ende opp med enten svært store eller svært små verdier for mål-egenskaper.

Hva sier du?

Dette er trolig bare én måte vi kan håndtere situasjonen, og det var i hovedsak drevet av min interesse i calc () – funksjonen. Så, som stiller spørsmålet: hvordan har du håndtert skalering helt komponent høyde? Har du sett calc() til bruk for det? Foretrekker du krangel stoppunkter på ulike bredder? Er det noe annet du bruke? Lys opp kommentarer!

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men den sosiale deling av koblinger ovenfor, sikkerhet og backup, Markdown-støtte, søk nettstedet, kommentar skjemaet, positing til sosiale nettverk-tilkoblinger, og mer!