Att välja rätt enheter är avgörande för att skapa responsiva och lättanvända layouter. Här är en snabbguide med praktiska steg och viktiga koncept:
Nyckelbegrepp:
- Pixlar (px): Absolut enhet som representerar enskilda bildpunkter.
- Ems (em): Relativ enhet baserad på teckensnittstorleken på roten.
- Rems (rem): Liknar ems, men baserad på teckensnittstorleken på html-elementet.
- Procent (%): Relativ enhet baserad på förälderns storlek.
- Viewport-enheter (vh, vw, vmin, vmax): Baserat på webbläsarfönstrets storlek.
- Andra enheter: Inkluderar punkter (pt), centimeter (cm), tum (in) och grader (deg).
Praktiska steg:
- Bestäm vilken typ av enhet som är lämplig: Överväg faktorer som responsivitet, skalbarhet och tillgänglighet.
- Använd ems eller rems för teckenstorlekar och radhöjder: Detta säkerställer att texten är proportionell med teckensnittstorleken på roten.
- Använd procent för relativa storlekar: Tillåt element att skala relativt sina föräldrar.
- Använd viewport-enheter för element som ska skalas med webbläsarfönstrets storlek: Exempelvis kan en navigationsmeny skalas med fönstrets bredd med hjälp av vw.
- Var försiktig med pixlar: Pixlar kan orsaka skalningsproblem på enheter med olika pixeltätheter.
CSS-exempel:
body {
font-size: 16px; /* ems - baserad på teckensnittstorleken på roten */
line-height: 1.5em; /* ems - skalas med teckensnittstorleken */
}
.container {
width: 50%; /* procent - skalas med föräldern */
margin: 0 auto;
}
#header {
width: 100vw; /* viewport-enhet - skalas med fönstrets bredd */
background-color: #f0f0f0;
}