Ontwerp een responsieve site met EM-gebaseerde maat

Jan 24, 2026

Procedures

U hebt waarschijnlijk gehoord dat u relatieve eenheden voor lettergrootte moet gebruiken. Dit is een goede regel voor toegankelijk webontwerp; Als de gebruiker de standaardlettergrootte van hun browser wijzigt, stelt dit de tekst van uw pagina in om het formaat van dienovereenkomstig te wijzigen. Mogelijk hebt u dit advies aangenomen en de schakelaar hebt gemaakt. Misschien stapte je uit je rekenmachine en bekeerde de lettergroottes van je site van Absolute px eenheden voor EMS of, waarschijnlijker, REMS.

Maar als dat is waar je bent gestopt, mis je veel van de flexibiliteit en kracht die EMS naar de browser brengt. De EM-eenheid is niet alleen een vervanging voor het vertrouwde px je kunt het gebruiken voor meer eigenschappen dan alleen lettertypegrootte Als u dat doet, beginnen sommige van zijn andere voordelen te ontstaan.

Door EMS consequent te gebruiken, kunt u componenten ontwerpen op de pagina die automatisch reageert als de wijziging van het lettergrootte. Dan, met een slimme truc voor een responsieve lettergrootte, kunt u een volledige pagina produceren die dynamisch aanpast op de viewportbreedte van de browser. Laat me je laten zien hoe je het 'relatieve' gedrag van EMS moet halen om ontwerpen te maken die schaalbaar en responsief zijn.

Lettergrootte-eenheden

EMS gebruiken voor lettergrootte kan lastig zijn. De exacte waarde wordt bepaald door de geërfde lettergrootte van het element (d.w.z. de lettergrootte van het ouderelement). Dit wordt gecompliceerd wanneer je elementen diep begint te brengen. Als een element in EMS een lettergrootte heeft, heeft zijn ouder een lettergrootte in EMS, en de ouder heeft nog een andere. U moet al deze waarden vermenigvuldigen om de daadwerkelijke berekende waarde van het kindelement te bepalen.

Dit betekent dat het plaatsen van dezelfde module in verschillende containers de betekenis van em kan veranderen. De module is onvoorspelbaar.

Om dit te voorkomen, gebruiken we meestal een andere relatieve eenheid voor lettergrootte: REMS. Een REM (of 'ROOT EM') is gebaseerd op de geërfde lettergrootte, maar op de lettergrootte van het rootelement van de pagina, & lt; html & gt; Dit betekent dat de waarde ervan hetzelfde is tijdens de pagina. Het is voorspelbaarder dan, en vaak de voorkeur aan, reguliere EMS.

Een module met EMS bouwen

Laten we relatieve eenheden gebruiken om een module te bouwen. We gaan echter niet de gemeenschappelijke aanpak volgen. In plaats van REM voor alles te gebruiken, zullen we het slechts één keer gebruiken: op het bovenste element van de module. Dit zal een bekende lettergrootte voor de module vaststellen, in plaats van op basis van een onvoorspelbare keten van EM-waarden erboven in de DOM. Het betekent dat we gemakkelijk de grootte van de module kunnen schalen door een enkele waarde te overschrijven.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Gebruik rijst op het buitenste element om een bekende lettergrootte vast te stellen, gebruik vervolgens EMS om te bouwen op basis van die waarde

Nadat we dit bekende lettergrootte hebben vastgesteld, zijn we veilig om regelmatig EMS in de hele module te gebruiken. Gebruik het niet alleen voor elke lettergroottes op de subelementen, maar ook voor de meeste andere eigenschappen, waaronder vulling marge en grensradius

We bouwen een paneel met een kop en een lichaam. De markup ziet er als volgt uit:

 & lt; div class = "paneel" & GT;
  & LT; DIV-klasse = "Panel-rubriek" & GT;
    & LT; H3 & GT; Zie de kracht van EMS & LT; / H3 & GT;
  & LT; / DIV & GT;
  & lt; div class = "paneel-body" & GT;
    Overweeg de manieren waarop u relatief kunt gebruiken
    eenheden voor dynamische maat van uw modules.
  & LT; / DIV & GT;
& lt; / div & gt;

Laten we de buitencontainer stijl vinden. We stellen de lettergrootte in op 1rem om onze lokale EM-waarde vast te stellen. We definiëren dan de grensradius EMS gebruiken. Ik hou ervan om PX voor grens te gebruiken, maar om een mooie fijne lijn te krijgen.

 .Panel {
  FONT-SIZE: 1REM;
  Grens: 1px solide # 678;
  Grensradius: 0.3em;
  overloop verborgen;
}

Stijl de binnenste elementen in. We zullen EMS gebruiken voor opvulling. Dan zullen we de lettergrootte van de rubriek tot 1,25 keer onze lokale EM-waarde verhogen, waardoor een 20px-berekende grootte wordt geproduceerd.

 .Panel-rubriek {
  Vulling: 0.6 MEM 1.2EM;
  Achtergrondkleur: #cde;
  Border-bodem: 1px vaste # 678;

.Panel-rubriek & GT; H3 {
  FONT-SIZE: 1.25EM;
  marge: 0;
  Letter-spating: 0.03em;

.Panel-body {
  Vulling: 0.6 MEM 1.2EM;
}

U kunt de opvulingswaarden vermenigvuldigen met hun lettergrootte om hun berekende waarden (9.6PX verticaal en 19,2px horizontaal) te bepalen. Waarheid, het maakt echter niet uit. Probeer niet te verzanden met pixel-perfecte metingen. Dit kan ongemakkelijk voelen, maar druk op ON. Hoe meer u EMS gebruikt, hoe meer u als een eenheid in hun eigen respect schikt.

Dynamisch het ontwerp schalen

Wanneer we herbruikbare modules als deze creëren, vinden we vaak dat we een paar variaties nodig hebben. Stel dat we een grotere versie wilden maken. Als we PX voor alles gebruikten, zou dit betekenen dat de lettergrootte, de vulling, de grensradius enzovoort. Omdat we echter alles hebben gedefinieerd in relatie tot een REM-gebaseerde lettergrootte, hoeven we die waarde alleen te wijzigen en de hele module zal reageren:

 .Panel - groot {font-size: 1.2rem; }

We voegen deze klasse eenvoudig toe aan een paneel om het groter te maken: & lt; div class = "panel paneel - groot" & GT; Dit zal de lokale definitie van een em veranderen, en dus ook de grensradius en de opvulling veranderen, samen met de lettergrootte van zijn kindelementen. Met een enkele verklaring hebben we elk deel van de module geformuleerd.

A panel module, with paddings and border radius defined using ems — Een paneelmodule, met paddingen en grensradius gedefinieerd met behulp van EMS

Evenzo kunnen we een kleine versie maken:

 .Panel - Small {FONT-SIZE: 0.8REM; }

Door de module te aardingen met behulp van een lettergrootte op het hoogste niveau in REMS, hebben we het stabiel en voorspelbaar gemaakt. Door al het andere in het gebruik van EMS te definiëren, hebben we al zijn componentonderdelen schaalbaar gemaakt.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Het is mogelijk om de grootte van alles in de module op één waarde te baseren, verander dan die waarde om het allemaal te schalen

Dit is een krachtig patroon. U kunt deze aanpak voor alles op uw pagina gebruiken, van vervolgkeuzemenu's naar Social Media-knoppen. Grond de module met een REM-waarde en gebruik ze vervolgens voor vrijwel al het andere van PLADDINGS naar PLAATSEREN naar pictogrammaten.

Het laten reageren

Laten we het principe één niveau verder duwen. We hebben de module (en theoretisch alle andere modules op de pagina) met behulp van REMS en EMS. Dit betekent uiteindelijk dat hun grootte is gebaseerd op de lettergrootte van het wortelelement. Vervolgens kunnen we deze enkele waarde aanpassen om de volledige pagina op zijn beurt te laten reageren.

Laten we een andere relatieve eenheid inbrengen: vh De berekende waarde van dit apparaat is afgeleid van de schermgrootte van de gebruiker; Het is gelijk aan 1 procent van de breedte van de viewport. Als we de VH-eenheid gebruiken om de root-lettergrootte te definiëren, zal deze automatisch worden opgesteld, SANS MEDIA QUERIONS. Stel de lettergrootte in op de root naar 2vw

 HTML {
  FONT-SIZE: 2VW;
}

Helaas is het effect een beetje te sterk. Op een iPhone 6 zal dit bijvoorbeeld berekenen op 5.5px, die te klein is. Evenzo is het onredelijk groot op grotere schermen. Om het effect te verzachten, kunnen we gebruik maken van CSS's Calc () functie:

 HTML {
  FONT-SIZE: CALP (0.6EM + 1VW);

Nu is de lettergrootte gedeeltelijk afgeleid van een stabiele waarde en deels van een responsieve. Dit produceert een veel beter effect. De 0.6em gedraagt zich als een soort van minimale lettergrootte. Nu zal de root em vloeistof van ongeveer 13 px op smartphone opstellen naar 21px op een gemiddeld desktopscherm.

Met uw pagina bestaande uit schaalbare modules, elk geaard aan de remwaarde, en zij zullen ook schalen met de viewport. De pagina is gestructureerd met een drie-tierhiërarchie; U kunt de grootte van de volledige pagina, een afzonderlijke module of een enkel element wijzigen door een eenvoudige bewerking aan de lettergrootte te maken. Vertrouw op de EMS en REMS en de browser zorgt voor het werk voor u.

Mogelijk moet u nog steeds de incidentele mediacy-query toevoegen om lijnwikkeling en een andere responsieve zorgen te regelen. Maar dit kleine stukje code wordt gecombineerd met een gewoonte om EMS te gebruiken en rems zal je daar veel van de weg brengen.

Dit artikel was oorspronkelijk in netto tijdschrift kwestie 288; koop het hier

Gerelateerde artikelen:

10 typografie trucs Elke ontwerper moet het weten
De gids van een ontwerper voor typografie en lettertypen
Master Toegankelijke Web Typografie

Ontwerp een responsieve site met EM-gebaseerde maat

Lettergrootte-eenheden

Een module met EMS bouwen

Dynamisch het ontwerp schalen

Het laten reageren

Procedures - Meest populaire artikelen

Een gelaagd parallax-effect op uw site maken

Hoe realistische figuren te tekenen

Leer een 3D-persoon te modelleren in Zbrush en Maya

Perfecte prototypes en hand-off ontwerpen met Marvel

Hoe u het licht vastlegt met oliën

Toptips voor het beeldhouwen van een wezen in Zbrush

15 tips voor het optimaliseren van cross-apparaat

Maak 3D-brandeffecten

Categorieën