Leuke Tip: Gebruik calc() om de Hoogte te Veranderen van een Held Component

0
19

Het concept van de Vloeistof Typografie werd heen en weer geslingerd, een paar jaar geleden. Het belangrijkste idee is dat als je weet wat de grootte van je lettertype is op twee verschillende viewport grootte, dan kunt u de schalen soepel tussen de twee maten. We hadden een jQuery oplossing voor dit in FitText (bedoeld bij de posten, van de cursus) tot de calc() functie is geleverd, geven ons een pure CSS-oplossing.

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

Zie de Pen Vloeistof Typografie door Martino Stenta (@martinostenta) op CodePen.

De belangrijke nummers hier zijn 24px (het grotere lettertype maximaal 800px viewports) en 16px (de kleinere font-size naar beneden te 400px viewports). Ik zou geen gebruik maken van de termen “minimum” of “maximum” te beschrijven lettergroottes en viewports in deze context, want het is een beetje misleidend. In feite, moet u nog steeds een standaard lettertypegrootte voor viewports kleiner dan 400px en groter dan 800 pixels, anders worden het lettertype wordt steeds kleiner (of groter) met dezelfde schaal van de vergelijking. Of, als u wilt, definieert u een andere schaal voor de grotere schermformaten.

Zie de Pen Vloeistof Typografie met afmetingen resetten door Martino Stenta (@martinostenta) op CodePen.

Het werkt echt goed en je moet zeker check de wiskunde achter dit.

Vulling en lijn hoogte?

Ik vond het concept van de Vloeistof Typografie zo veel dat vroeg ik me af of het zou kunnen werken met andere eigenschappen. En het werkt! U kunt geen gebruik maken van een percentage, maar zolang je de stok met px, em of rem-eenheden, dan is het OK. Ik ben een pixel man, dus al mijn experimenten hebben gebruikt die, maar er is dit nette generatorthat helpt u met conversies als je het nodig hebt.

Dus, terug naar de padding en de line-height. Met behulp van dezelfde calc() logica, kunnen we een volledig vloeibaar *lay-out* met vaste waarden voor bepaalde schermgroottes.

Zie de Pen Pure CSS Variabele Vulling, de lettergrootte en regelhoogte door Martino Stenta (@martinostenta) op CodePen.

Ik implementeerde dit idee op deze website, maar hield het lettertype-grootte en de line-height. En, ja, het is eenvoudiger om het verleden te kijken al die wiskunde en gebruikt hoe meer je er mee werkt.

Zie de Pen Werken Voorbeeld van calc() op lettertype-grootte en de line-hieght door Martino Stenta (@martinostenta) op CodePen.

Een uitweiding over “Held” componenten

Als je bent zoals ik, dan kun je misschien een probleem met wat we allemaal te weten zijn gekomen als de held component. Het is alomtegenwoordig in de mate dat het is uitgegroeid tot een nietje in het ontwerp van systemen (zoals Bootstrap) en je kan het zelfs zien satirized op sites zoals deze.

Mijn belangrijkste probleem betreft de beste manier om ze te laten reageren. Als het niet een *volledig scherm* hero (d.w.z. neemt de gehele viewport bij elke grootte), dan heb ik meestal vraagt de ontwerper hoe de pagina zich moeten gedragen. Er is vaak een deel van de held van de pagina dat werkt prima, dus dat stelt me in staat om gebruik padding-bottom in % met absolute positionering van de geestelijke inhoud. Die tactiek werkt het meest van de tijd,

Dit is leuk en het werkt prima, vooral op de desktop-versie van een website. Je eindigt met een nette held sectie, de verhouding is goed en de inhoud is gericht.

Zie de Pen Standaard held sectie met “padding-bottom’ door Martino Stenta (@martinostenta) op CodePen.

Maar wat gebeurt er wanneer u begint met het krimpen van de viewport? De held leesbaar blijft tot een punt waar je echt behoefte aan verandering in het aandeel.

Ervan uitgaande dat we werken met een desktop-eerste responsieve benadering, konden we beginnen met een horizontale rechthoek die schalen naar het punt waar we vertrokken met een verticale rechthoek op kleine schermen.

Held component met verschillende verhoudingen gebaseerd op het apparaat

Dit is een PITA, omdat je zou kunnen eindigen met vele lijnen van CSS om op een leuke en leesbare held deel aan verschillende breekpunten.

Er moet een betere manier zijn, toch? Wat te doen als de held van de hoogte en de breedte van de pagina wordt smaller?

Terug naar vloeibaarheid!

Dus, ik ging weer naar de calc() functie die werkte in die andere situaties, zoals het maken van de browser omgaan met de wiskunde en de schaal doen als de viewport veranderingen.

Hier is de CSS van de Vloeistof Typografie voorbeeld zijn we begonnen met:

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

Hier is wat we willen: een held component die wordt groter, terwijl u krimp van de pagina. Ik gebruikte pixel eenheden voor de vloeistof deel en percentages overal anders.

Hier is een screencast van hoe de oplossing die ik landde op:

Live Demo

Dit is heel handig wanneer u wilt geven meer verticale ruimte aan de tekst. Het krimpen van de viewport breedte van groot naar klein zal eindigen met meer lijnen voor dezelfde tekst, omdat de grootte van het lettertype niet te klein zijn.

Zie de Pen Held sectie met calc() door Martino Stenta (@martinostenta) op CodePen.

Best leuk, toch? Nog een andere manier calc() bleek het zou kunnen oplossen van een scenario voor me.

Ja, er zijn een aantal valkuilen

Browser support is erg goed, voor bijna 93% van de gebruikers (op het moment van schrijven), met uitzondering van Opera mini.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
19* 15 4* 10 12 6*

Mobiele / Tablet

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

Vergeet ook niet dat dit calc() techniek ondersteunt alleen px, em, en de rem-eenheden. Maar de voorbeelden die we hier zijn vrij gemakkelijk om te zetten eenheden voor dingen zoals padding-bottom percentages pixels sinds de held is meestal 100% in de breedte.

Oh! En vergeet niet opnieuw instellen van de waarden voor en na de breekpunten in de calc() functie. Anders zul je eindigen met zeer grote of zeer kleine waarden voor de doelgroep eigenschappen.

Wat zegt u?

Dit is waarschijnlijk een van de manieren waarop we kunnen omgaan met de situatie en het werd voornamelijk gedreven door mijn interesse in de calc() functie. Dus dat roept de vraag op: hoe heb je het aangepakt schalen held onderdeel van de hoogte? Heb je calc() te gebruiken? Wilt u liever ruzie breekpunten in verschillende breedtes? Is er iets anders wat u gebruik? Het licht van de opmerkingen!

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de social sharing links boven, beveiliging en back-ups, Markdown ondersteuning, site search, het reactieformulier, positionering, sociale netwerk-verbindingen, en meer!