Share
De rem unit wordt gebruikt om lettertypen in relatieve termen te definiëren in plaats van met een absolute grootte in pixels. Maar wist u dat deze eenheid nuttig is voor zowel lay-outs als typografie?
In deze video-zelfstudie uit mijn CSS Layout-cursus leer je waarom het gebruik enorm is rem eenheden voor lay-outs.
In de CSS Layout-cursus worden al onze opmaakspecificaties uitgevoerd met behulp van de rem eenheid. Zoals we in de typografiecursus meer in detail hebben genoemd, rem eenheid is een veelvoud van de hoofdlettergrootte voor uw pagina.
De rem eenheid is nuttig, niet alleen typografie, maar ook voor uw lay-out, en ik zal u laten zien waarom u zou moeten gebruiken rem eenheden wanneer u uw lay-out instelt.
Laten we beginnen met een blik op de voorbeeldpagina waar we aan werken:
Als ik vervolgens de lettergrootte in de browser wijzig, kunt u zien dat de lettergrootte groter wordt op de pagina:
Als ik nu de lettergrootte blijf vergroten en ik vernieuw, kunt u nu zien dat de hele lay-out is aangepast om rekening te houden met de grotere lettergrootte.
Alles is nog steeds leesbaar, en dat is mogelijk omdat door te gebruiken rem eenheden om onze volledige lay-out in te stellen, zorgen we ervoor dat alles flexibel is, afhankelijk van de rootlettergrootte van ons document, afkomstig van de browserinstellingen.
In dezelfde zin, als ik onze lettertypegrootte terugbreng naar een heel klein formaat en opnieuw ververs, kun je zien dat de hele lay-out opnieuw is gekrompen.
Dus door deze te gebruiken rem eenheden, zorgen we ervoor dat wanneer een gebruiker de lettergrootte wijzigt, niet alleen de tekst zelf wordt aangepast, maar ook de hele lay-out.
In de volledige cursus Start Here: Learn CSS Layout zet je wat je in deze video hebt geleerd in de praktijk door verschillende lay-outs te maken met behulp van rem units. U leert alles wat u moet weten om de meest voorkomende soorten lay-outs in webdesign te maken. We bespreken de grootte, uitlijning, spatiëring en praktische tips voor het maken van responsieve CSS.
Als je net begonnen bent en CSS wilt beheersen, ga je naar Learn CSS: The Complete Guide.
Of u kunt experimenteren met meer cursussen uit onze "Start Here" -serie voor beginners in webontwerp:
Accentsconagua