Kul Tips: Använd calc() för att Ändra Höjden på en Hjälte Komponent

0
20

Begreppet Vätska Typografi kastades runt för ett par år sedan. Den huvudsakliga idén är att om du vet vilken storlek du teckensnitt finns i två olika virtuella storlekar, så kan du ha skalning av teckensnitt smidigt mellan två storlekar. Vi hade en jQuery lösning för detta i FitText (avsedd för rubriker, naturligtvis) tills calc() funktion levererades ger oss en ren CSS-lösning.

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

Se Pennan Vätska Typografi av Martino Stenta (@martinostenta) på CodePen.

Det viktiga här är nummer 24 px (de större teckensnitt upp till 800px viewport) och 16px (mindre teckenstorlek ner till 400px viewport). Jag skulle inte använda de termer som “minimum” eller “max” för att beskriva teckenstorlekar och viewport i detta sammanhang, eftersom det är lite missvisande. I själva verket kan du fortfarande behovet av att tillhandahålla en standard teckenstorlek för viewport mindre än 400px och större än 800px — annars kommer teckensnitt håll blir mindre (eller större) med samma skala av ekvationen. Eller, om du är sugen kan du definiera en annan skala för större skärmstorlekar.

Se Pennan Vätska Typografi med återställ storlek av Martino Stenta (@martinostenta) på CodePen.

Det fungerar riktigt bra och du bör definitivt kolla matten bakom detta.

Utfyllnad och radavstånd?

Jag gillade konceptet av Vätska Typografi så mycket att jag frågade mig själv om det skulle kunna fungera med andra egenskaper. Och det gör det! Du kan inte använda en procent, men så länge du håller dig med px, em eller rem-enheter, då är det OK. Jag är en pixel kille, så alla mina experiment har använt dem, men det är det här snyggt generatorthat hjälper dig med omvandlingar om du behöver det.

Så, tillbaka till utfyllnad och line-height. Med samma calc() logik, kan vi uppnå en fullt vätska *layout* med fasta värden för vissa skärmstorlekar.

Se Pennan Ren CSS Variabel Utfyllnad, Teckenstorlek och radavstånd av Martino Stenta (@martinostenta) på CodePen.

Jag genomfört denna idé på denna webbplats, men höll det för font-size och line-height. Och, ja, det blir lättare att se förbi allt som matte och sätta för att använda mer du jobbar med det.

Se Pennan Fungerande Exempel av calc() på font-size och line-hieght av Martino Stenta (@martinostenta) på CodePen.

En utvikning om “Hero” – komponenter

Om du är som jag, då kanske du tar problemet med vad vi alla har lärt känna som den hjälte komponent. Det är allestädes närvarande i den omfattning som det har blivit en stapelvara i design system (som Bootstrap) och du kanske har även sett att det skulle på webbplatser som denna.

Min huvudsakliga gripe rör det bästa sättet att göra dem mottagliga. Om det inte är en *hel skärm* hero (dvs tar över hela visningsområdet i valfri storlek), då brukar jag be designer hur sidan ska bete sig. Det är ofta en del av hjälten sida som fungerar bra, så som tillåter mig att använda padding-bottom i % med absolut positionering av den inre innehåll. Den taktiken fungerar för det mesta,

Detta är roligt och det fungerar bra, särskilt på den stationära versionen av webbplatsen. Du sluta med en snygg hjälte avsnitt, andelen är bra och innehållet är centrerad.

Se Pennan Standard hjälte avsnittet med padding-bottom’ av Martino Stenta (@martinostenta) på CodePen.

Men vad händer när du börjar krympa den virtuella? Hjälten fortfarande är läsbar upp till en punkt, du måste verkligen ändra den andel.

Förutsatt att vi arbetar med ett desktop-första lyhörda förhållningssätt, att vi kunde börja med en horisontell rektangel som skalar ned till den punkt där vi är kvar med en vertikal rektangel på små skärmar.

Hero komponent med olika proportioner baserat på enheten

Detta är en PITA eftersom du kan hamna med många rader CSS för att ha en trevlig och läsbar hjälte avsnitt vid olika brytpunkter.

Det måste finnas ett bättre sätt, till höger? Vad händer om hjälten kunde öka sin höjd medan bredden på sidan blir smalare?

Tillbaka till smidighet!

Så, jag vände tillbaka till calc() funktion som arbetade i de andra situationer, som att göra webbläsaren hantera matematiska och skala saker därför som det virtuella förändringar.

Här är CSS från Vätska Typografi exempel som vi började med:

p {
width: 100%;
max-width: 1200px;
marginal: 0 auto;
font-family: “Open Sans’, sans-serif;
font-size: calc(24 px + (18 – 24)*(100vw – 400px)/(1200 – 400));
line-height: 1.5;
padding: 10px;
}

Här är vad vi vill ha: en hjälte komponent som blir större när du förminska sidan. Jag använde pixel enheter för flytande del och procentsatser som överallt annars.

Här är en screencast av hur den lösning som jag landade på:

Live Demo

Detta är ganska användbart när du vill ge mer utrymme i höjdled för att texten. Krympande det virtuella bredd, från stora till små kommer att sluta med fler rader för samma sms: a, eftersom den teckenstorlek som inte kan vara alltför liten.

Se Pennan Hjälte avsnitt med calc() av Martino Stenta (@martinostenta) på CodePen.

Ganska trevligt, eller hur? Ännu ett sätt calc() visade att det kunde lösa ett scenario för mig.

Ja, det finns några varningar

Webbläsare-stöd är mycket bra, kontrollräkna nästan 93% av användarna (i skrivande stund), med det främsta undantaget är Opera mini.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
19* 15 4* 10 12 6*

Mobil / Surfplatta

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

Kom också ihåg att detta calc() tekniken stöder endast px, em, och rem-enheter. Men de exempel som vi berört här är ganska lätt att konvertera enheter för saker som padding-bottom procentsatser till pixlar eftersom hjälten är vanligtvis 100% i bredd.

Åh! Och kom ihåg att återställa dina värden före och efter brytpunkten i calc () – funktionen. Annars kommer du att hamna med antingen mycket stora eller mycket små värden för target-egenskaper.

Vad säger du?

Detta är förmodligen bara ett av de sätt vi kan hantera situationen och det var främst driven av mitt intresse i calc () – funktionen. Så att väcker frågan: hur har du hanterat skalning hjälte komponent höjd? Har du sätta calc() för att använda för det? Föredrar du gräl brytpunkter vid olika bredder? Är det något annat du använda? Lyser upp kommentarer!

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men den sociala dela länkar ovan, säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sättande till sociala nätverk, och mycket mer!