Designa en responsiv plats med EM-baserad limning

Sep 13, 2025

Hur

Du har nog hört att du ska använda relativa enheter för teckensnittstorlek. Detta är en bra regel för tillgänglig webbdesign; Om användaren ändrar sin webbläsares standardstorlek, gör det möjligt för din sids text att ändra storlek i enlighet med detta. Du kan ha tagit det här rådet och gjort omkopplaren. Kanske fick du ut din räknare och konverterade din webbplatss teckensnittstorlekar från Absolute px enheter till EMS eller, mer sannolikt, REMS.

Men om det är där du slutade, saknar du mycket flexibilitet och makt som EMS tar med sig till webbläsaren. EM-enheten är inte bara en ersättning för den bekanta px ; Du kan använda den för fler egenskaper än bara textstorlek . Om du gör börjar några av dess övriga fördelar dyka upp.

Genom att konsekvent använda EMS kan du designa komponenter på den sida som svarar automatiskt om teckensnittstorleken ändras. Sedan, med ett smart trick för en lyhörd teckensnittstorlek, kan du producera en hel sida som justeras dynamiskt baserat på webbläsarens visningsbredd. Låt mig visa dig hur man kan utnyttja det "relativa" beteendet hos EMS för att skapa mönster som är skalbara och mottagliga.

Fontstorleksenheter

Att använda EMS för teckensnittstorlek kan vara knepigt. Det exakta värdet bestäms av elementets ärvda teckensnittstorlek (dvs tonelementets teckenstorlek). Detta blir komplicerat när du börjar nestelement djupare. Om ett element har en teckensnitt i EMS, har dess förälder en typsnitt i EMS, och dess förälder har ännu en. Du måste multiplicera alla dessa värden för att bestämma det faktiska beräknade värdet av barnelementet.

Det innebär att placering av samma modul i olika behållare kan ändra betydelsen av dem. Modulen kommer att vara oförutsägbar.

För att undvika detta använder vi vanligtvis en annan relativ enhet för teckensnittstorlek: REMS. En REM (eller "root em") baseras inte på den ärftliga teckensnittstorleken, men på teckenstorleken på sidans rotelement, & lt; html & gt; . Det betyder att dess värde är detsamma hela sidan. Det är mer förutsägbart än, och föredrar ofta, vanliga EMS.

Bygga en modul med EMS

Låt oss använda relativa enheter för att bygga en modul. Men vi kommer inte att följa det gemensamma tillvägagångssättet. I stället för att använda REM för allt, använder vi det bara en gång: på det högsta elementet i modulen. Detta kommer att etablera en känd typsnitt för modulen, snarare än att den baseras på en oförutsägbar kedja av EM-värden ovanför den i DOM. Det betyder att vi enkelt kan skala storleken på modulen genom att överväga ett enda värde.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Använd REMS på det yttersta elementet för att upprätta en känd teckensnittstorlek, använd sedan EMS för att bygga baserat på det värdet

Efter att vi fastställer den här kända teckensnittstorleken är vi säkra att använda vanliga EMS i hela modulen. Använd det inte bara för några teckensnittstorlekar på delelementen, men också för de flesta andra egenskaper, inklusive stoppning , marginal och gränsradie .

Vi bygger en panel med en rubrik och en kropp. Markupen ser ut så här:

 & lt; div class = "panel" & gt;
  & lt; div class = "Panel-rubrik" & GT;
    & lt; h3 & gt; se makten av EMS & LT; / H3 & GT;
  & lt; / div & gt;
  & lt; div class = "panelkropp" & gt;
    Tänk på hur du kan utnyttja relativ
    Enheter för dynamisk limning av dina moduler.
  & lt; / div & gt;
& lt; / div & gt;

Låt oss stila den yttre behållaren. Vi ställer in teckensnittstorleken på 1rem att etablera vårt lokala EM-värde. Vi definierar då gränsradie med hjälp av EMS. Jag tycker om att använda PX för kant, men för att få en trevlig fin linje.

 .panel {
  Typsnitt: 1rem;
  Border: 1px Solid # 678;
  Border-Radius: 0.3EM;
  Överflöde: Dold;
}

Nästa, stil de inre elementen. Vi använder EMS för vaddering. Då ökar vi teckenstorleken på rubriken till 1,25 gånger vårt lokala em-värde, vilket ger en 20px-beräknad storlek.

 .panel-rubrik {
  Padding: 0,6EM 1.2
  Bakgrundsfärg: #cde;
  Gräns-botten: 1px solid # 678;
}
.panel-rubrik & gt; h3 {
  FONT-STORLEK: 1,25EM;
  Marginal: 0;
  Brevavstånd: 0,03EM;
}
.panel-kropp {
  Padding: 0,6EM 1.2
}

Du kan multiplicera vadderingsvärdena med deras teckensnittstorlek för att bestämma deras beräknade värden (9.6px vertikal och 19.2px horisontell). Sanligtvis spelar det dock ingen roll. Försök att inte bli boggad med pixel-perfekta mätningar. Detta kan känna sig besvärligt, men tryck på. Ju mer du använder EMS, desto mer kommer du att bli bekant med dem som en enhet i sin egen respekt.

Dynamiskt skalar designen

När vi skapar återanvändbara moduler så här tycker vi ofta att vi behöver några variationer. Säg att vi ville skapa en större version. Om vi använde PX för allt skulle det innebära att det ökar teckensnittstorleken, vadderingen, gränsradien och så vidare. Men eftersom vi har definierat allt i förhållande till en REM-baserad teckensnittstorlek, behöver vi bara ändra det värdet, och hela modulen svarar:

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

Vi lägger helt enkelt till den här klassen till en panel för att göra det större: & lt; Div Class = "Panelpanel - Stor" & GT; . Detta kommer att ändra den lokala definitionen av en em, och därmed gränsen Radius och Padding förändras också, tillsammans med teckensnittstorleken hos sina barnelement. Med en enda deklaration har vi ändrat varje del av modulen.

A panel module, with paddings and border radius defined using ems — En panelmodul, med paddings och gränsradie definierad med användning av EMS

På samma sätt kan vi skapa en liten version:

 .Panel - liten {font-size: 0.8rem; }

Genom att markera modulen med en toppnivåstorlek i REMS, har vi gjort det stabilt och förutsägbart. Genom att definiera allt annat inom att använda EMS har vi gjort alla dess komponentdelar skalbara.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Det är möjligt att basera storleken på allting i modulen på ett värde och ändra det värdet för att skala allt

Detta är ett kraftfullt mönster. Du kan använda detta tillvägagångssätt för något på din sida, från rullgardinsmenyer till sociala medier. Markera modulen med ett REM-värde, använd sedan EM för nästan allt annat från paddings för att placera till ikonstorlekar.

Vilket gör det responsivt

Låt oss driva principen en nivå längre. Vi har sized modulen (och teoretiskt alla andra moduler på sidan) med REMS och EMS. Detta innebär slutligen att deras storlek är baserad på rotelementets teckensnittstorlek. Sedan kan vi justera detta enda värde för att hela sidan svara i sin tur.

Låt oss ta med en annan relativ enhet: vh . Denna enhets beräknade värde härrör från användarens skärmstorlek; Det är lika med 1 procent av Bredden på visningsporten. Om vi använder VH-enheten för att definiera rotfontstorleken, kommer den automatiskt att skala responsivt, Sans Media Queries. Ställ in teckensnittstorleken på roten till 2vw :

 HTML {
  FONT-STORLEK: 2VW;
}

Tyvärr är effekten lite för stark. På en iPhone 6 kommer det till exempel att beräkna till 5.5px, vilket är för litet. På samma sätt är det orimligt stort på större skärmar. För att mjukna effekten kan vi använda CSS: s Calc () fungera:

 HTML {
  FONT-STORLEK: CALC (0,6EM + 1VW);
}

Nu är teckensnittstorleken delvis från ett stabilt värde, och delvis från en responsiv. Detta ger en mycket bättre effekt. De 0,6 beter sig som en slags minsta teckenstorlek. Nu kommer roten att skala fluidly från ca 13px på smartphone till 21px på en genomsnittlig skrivbordsskärm.

Med din sida består av skalbara moduler, var och en jordad till REM-värdet, och de kommer också att skala med visningsporten. Sidan är strukturerad med en tre-tier hierarki; Du kan ändra storleken på hela sidan, en enskild modul eller ett enda element genom att göra en enkel redigering till teckensnittstorleken. Lita på EMS och REMS, och webbläsaren tar hand om arbetet för dig.

Du kan fortfarande behöva lägga till enstaka mediasfråga för att styra linjens omslag och några andra responsiva problem. Men den här lilla biten kombinerad med en vana att använda EMS och REMS kommer att få dig mycket av vägen där.

Den här artikeln var ursprungligen inneburad i nätmagasin utgåva 288; köp det här

Relaterade artiklar:

10 typografi tricks varje designer borde veta
En designers guide till typografi och teckensnitt
Master tillgänglig webbtypografi

Designa en responsiv plats med EM-baserad limning

Fontstorleksenheter

Bygga en modul med EMS

Dynamiskt skalar designen

Vilket gör det responsivt

Hur - Mest populära artiklar

Gör din egen stylus med bara 4 hushållsartiklar (allvarligt)

Affinity Designer: Hur man använder begränsningar

Skapa en interaktiv parallax bild

Hur man använder Adobe Capture CC

Hur man simulerar explosioner i Maya

Lägg till visuella signaler till din webbplats

brudgummen en oemotståndligt furig varelse

Utforska kreativ kod med p5.js

Kategorier