Converteer tussen pixels (PX), root em (REM) en em (EM) CSS-eenheden met deze eenvoudige calculator. Essentieel voor responsief webdesign en ontwikkeling.
Converteer tussen pixels (PX), root em (REM) en em (EM) eenheden. Voer een waarde in in elk veld om de equivalente waarden in de andere eenheden te zien.
Het begrijpen en converteren tussen CSS-eenheden is essentieel voor responsief webdesign en ontwikkeling. De PX (pixel), REM (root em) en EM eenheden zijn fundamentele bouwstenen die bepalen hoe elementen worden geconfigureerd en gepositioneerd op verschillende apparaten en schermformaten. Deze uitgebreide eenheden converteren tool stelt je in staat om waarden tussen deze drie kritische CSS-eenheden eenvoudig te vertalen, waardoor je meer flexibele en onderhoudbare weblay-outs kunt creëren.
Pixels (PX) zijn vaste eenheden die nauwkeurige controle bieden maar niet schaalbaar zijn, terwijl REM-eenheden schalen ten opzichte van de lettergrootte van het root-element, en EM-eenheden schalen ten opzichte van de lettergrootte van hun bovenliggend element. Het converteren tussen deze eenheden kan uitdagend zijn, vooral bij het werken met complexe ontwerpen of bij het ondersteunen van toegankelijkheidsfuncties zoals het vergroten van tekst. Onze PX, REM en EM converter vereenvoudigt dit proces, zodat je je kunt concentreren op het creëren van mooie, responsieve ontwerpen.
Pixels (PX) zijn de meest basale en algemeen gebruikte CSS-eenheid. Een pixel is een enkel punt in een digitaal afbeeldingsrooster en vertegenwoordigt het kleinste controleerbare element op een scherm. In CSS bieden pixels een vaste eenheid van meting die consistent blijft, ongeacht andere stijlfactoren.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Belangrijke kenmerken van pixels:
REM (root em) eenheden zijn relatieve eenheden die schalen op basis van de lettergrootte van het root-element (typisch het <html> element). Standaard stellen de meeste browsers de root-lettergrootte in op 16px, waardoor 1rem gelijk is aan 16px, tenzij expliciet gewijzigd.
1html {
2 font-size: 16px; /* Standaard in de meeste browsers */
3}
4
5.element {
6 width: 12.5rem; /* Gelijk aan 200px met standaard root-lettergrootte */
7 font-size: 1rem; /* Gelijk aan 16px */
8 margin: 0.625rem; /* Gelijk aan 10px */
9}
10Belangrijke kenmerken van REM eenheden:
EM eenheden zijn relatieve eenheden die schalen op basis van de lettergrootte van hun bovenliggend element. Als er geen lettergrootte voor het bovenliggende element is opgegeven, verwijzen EM's naar de geërfde lettergrootte.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Gelijk aan 16px (20px × 0.8) */
7 margin: 0.5em; /* Gelijk aan 8px (16px × 0.5) */
8}
9Belangrijke kenmerken van EM eenheden:
Het begrijpen van de wiskundige relaties tussen PX, REM en EM eenheden is cruciaal voor nauwkeurige conversies. Hier zijn de formules die in onze converter worden gebruikt:
Om pixels naar REM eenheden te converteren, deel je de pixelwaarde door de root-lettergrootte:
Bijvoorbeeld, met de standaard root-lettergrootte van 16px:
Om pixels naar EM eenheden te converteren, deel je de pixelwaarde door de lettergrootte van het bovenliggende element:
Bijvoorbeeld, met een bovenliggende lettergrootte van 16px:
Om REM eenheden naar pixels te converteren, vermenigvuldig je de REM-waarde met de root-lettergrootte:
Bijvoorbeeld, met de standaard root-lettergrootte van 16px:
Om EM eenheden naar pixels te converteren, vermenigvuldig je de EM-waarde met de lettergrootte van het bovenliggende element:
Bijvoorbeeld, met een bovenliggende lettergrootte van 16px:
Om REM eenheden naar EM eenheden te converteren, moet je rekening houden met zowel de root-lettergrootte als de lettergrootte van het bovenliggende element:
Als zowel de root- als de bovenliggende lettergrootte gelijk zijn (bijv. 16px), dan is 1rem = 1em.
Om EM eenheden naar REM eenheden te converteren, gebruik je de volgende formule:
Nogmaals, als beide lettergroottes gelijk zijn, dan is 1em = 1rem.
Onze eenheden converter tool maakt het eenvoudig om waarden tussen PX, REM en EM eenheden te vertalen. Hier is een stapsgewijze gids voor het effectief gebruiken van de converter:
<html>-elementBegrijpen wanneer je elke CSS-eenheid moet gebruiken en hoe je tussen hen kunt converteren is cruciaal voor effectieve webontwikkeling. Hier zijn enkele praktische toepassingen en scenario's waarin onze eenheden converter van onschatbare waarde blijkt te zijn:
Converteren tussen eenheden is essentieel voor het creëren van echt responsieve ontwerpen:
1/* Converteer vaste pixelwaarden naar responsieve REM-eenheden */
2.container {
3 /* Van: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Van: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9Het gebruik van relatieve eenheden verbetert de toegankelijkheid door de voorkeuren van de gebruiker te respecteren:
Moderne ontwerpsystemen profiteren van doordacht gebruik van eenheden:
Het creëren van harmonieuze typografie vereist zorgvuldige eenheidsselectie:
1/* Typografisch systeem met REM-eenheden */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8Bij het implementeren van ontwerpen vanuit tools zoals Figma of Photoshop:
Hoewel PX, REM en EM de meest voorkomende eenheden zijn, zijn er alternatieven die het overwegen waard zijn:
De geschiedenis van CSS-eenheden weerspiegelt de bredere evolutie van webdesign, van statische lay-outs tot de responsieve, toegankelijke benaderingen van vandaag.
In de vroege dagen van CSS waren pixels de heersende eenheid. Webontwerpers creëerden vaste breedte lay-outs, typisch 640px of 800px breed om te voldoen aan gangbare schermresoluties. Toegankelijkheid en apparaatdiversiteit waren geen grote zorgen, en pixel-perfecte controle was het primaire doel.
Naarmate schermformaten diversifieerden, kregen percentage-gebaseerde lay-outs aan populariteit. Ontwerpers begonnen meer flexibele ontwerpen te creëren, hoewel typografie vaak in pixel-eenheden bleef. Deze periode zag de introductie van EM-eenheden in CSS, hoewel hun adoptie beperkt was vanwege de complexiteit van het beheren van cascaderende lettergroottes.
De introductie van de iPhone in 2007 transformeerde webdesign. Plotseling moesten websites werken op schermen zo klein als 320px breed. Dit stimuleerde de interesse in responsieve ontwerpmethoden en relatieve eenheden. De beperkingen van EM-eenheden (vooral het cascaderende effect) werden duidelijker naarmate ontwerpen complexer werden.
Ethan Marcotte's invloedrijke artikel over responsief webdesign in 2010 veranderde de manier waarop ontwikkelaars CSS-eenheden benaderden. De REM-eenheid werd geïntroduceerd in CSS3, waardoor de voordelen van relatieve schaling zonder de cascaderende complicaties van EM-eenheden werden geboden. De browserondersteuning voor REM-eenheden groeide gestaag tijdens deze periode.
Tegenwoordig omarmt webontwikkeling een mix van eenheden voor verschillende doeleinden:
Deze evolutie weerspiegelt de transitie van het web van een document-gebaseerd medium naar een complex applicatieplatform dat op talloze apparaten en in verschillende contexten moet werken.
1// Converteer tussen PX, REM en EM eenheden
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Voorbeeldgebruik
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
311:root {
2 /* Basis lettergroottes */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Veelvoorkomende pixelwaarden geconverteerd naar REM */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* Typografie schaal */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* Voorbeeldgebruik */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
341// SCSS functies voor eenheid conversie
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Voorbeeldgebruik
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // Gebruik bovenliggende lettergrootte (18px) voor em conversie
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def px_to_rem(px, root_font_size=16):
2 """Converteer pixels naar REM eenheden"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Converteer REM eenheden naar pixels"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Converteer pixels naar EM eenheden"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Converteer EM eenheden naar pixels"""
15 return em * parent_font_size
16
17# Voorbeeldgebruik
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21REM (root em) eenheden zijn relatief ten opzichte van de lettergrootte van het root-element (typisch het <html> element), terwijl EM eenheden relatief zijn ten opzichte van de lettergrootte van hun bovenliggend element. Dit belangrijke verschil betekent dat REM eenheden consistente sizing behouden door je document heen, terwijl EM eenheden een compounding effect kunnen creëren wanneer elementen genest zijn.
Er is geen enkele "beste" eenheid voor alle situaties. Een combinatie van eenheden is meestal het meest effectief:
De ideale aanpak is om elke eenheid te gebruiken voor wat hij het beste doet binnen een samenhangend systeem.
De standaard van 16px werd vastgesteld als een leesbaarheidsnorm die goed werkt op apparaten. Onderzoek heeft aangetoond dat tekst rond de 16px optimaal is voor lezen op schermen op typische kijkafstanden. Deze standaard biedt ook een goede basis voor toegankelijkheid, waardoor tekst niet te klein is voor de meeste gebruikers.
Ja, CSS ondersteunt negatieve waarden voor veel eigenschappen met behulp van elk type eenheid. Negatieve marges, vertalingen en posities zijn veelvoorkomende gebruiksgevallen voor negatieve waarden. Onze converter behandelt negatieve waarden correct voor alle eenheidstypes.
EM eenheden compounding wanneer elementen genest zijn. Bijvoorbeeld:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10Dit compounding effect kan nuttig zijn voor het creëren van proportionele ontwerpen, maar vereist zorgvuldige beheersing om onbedoelde schaling te voorkomen.
High-DPI displays worden automatisch behandeld bij het gebruik van relatieve eenheden zoals REM en EM. Aangezien deze eenheden zijn gebaseerd op de lettergrootte in plaats van fysieke pixels, schalen ze dienovereenkomstig op hoge-resolutie schermen. Voor afbeeldingen en randen, overweeg het gebruik van media queries met device-pixel-ratio of resolutie.
De browserondersteuning voor REM en EM eenheden in media queries is aanzienlijk verbeterd. Het gebruik van EM eenheden in media queries wordt over het algemeen aanbevolen omdat:
1/* Gebruik EM eenheden voor media queries */
2@media (min-width: 48em) { /* 768px met 16px basis */
3 /* Tablet stijlen */
4}
5
6@media (min-width: 64em) { /* 1024px met 16px basis */
7 /* Desktop stijlen */
8}
9De meeste ontwerptools werken voornamelijk met pixels. Bij het implementeren van ontwerpen:
Sommige ontwerptools hebben plugins die dit conversieproces automatisch kunnen helpen.
Browsers behandelen subpixelwaarden verschillend. Sommige browsers ronden naar de dichtstbijzijnde pixel, terwijl andere subpixel rendering ondersteunen voor soepelere schaling. Dit kan af en toe kleine inconsistenties veroorzaken tussen browsers, vooral met kleine REM/EM waarden of bij het gebruik van transformaties. Voor de meeste gebruiksgevallen zijn deze verschillen verwaarloosbaar.
Er is geen significante prestatieverschil tussen het gebruik van pixels, REM of EM eenheden in moderne browsers. De keuze van eenheden moet gebaseerd zijn op ontwerpeisen, responsief gedrag en toegankelijkheidsbehoeften in plaats van prestatieoverwegingen.
"CSS Values and Units Module Level 3." W3C Aanbeveling. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 25 mei 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Eenheden." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentatie. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Gebruik van CSS aangepaste eigenschappen (variabelen)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Begrijpen en gebruiken van rem-eenheden in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Stop met worstelen met handmatige CSS eenheid conversies en laat onze PX, REM en EM Eenheden Converter het werk voor je doen. Of je nu een responsieve website bouwt, een ontwerpsysteem creëert of gewoon meer wilt leren over CSS eenheden, deze tool bespaart je tijd en zorgt voor nauwkeurigheid. Voer je waarden nu in om te zien hoe eenvoudig eenheid conversie kan zijn!
Ontdek meer tools die handig kunnen zijn voor uw workflow