Konverter mellem pixels (PX), root em (REM) og em (EM) CSS-enheder med denne enkle kalkulator. Nødvendig for responsiv webdesign og udvikling.
Konverter mellem pixels (PX), root em (REM) og em (EM) enheder. Indtast en værdi i et felt for at se de ækvivalente værdier i de andre enheder.
At forstå og konvertere mellem CSS-enheder er essentielt for responsiv webdesign og udvikling. PX (pixel), REM (root em) og EM-enheder er fundamentale byggesten, der bestemmer, hvordan elementer er størrelsesbestemt og placeret på tværs af forskellige enheder og skærmstørrelser. Dette omfattende enhedsomformer-værktøj giver dig mulighed for nemt at oversætte værdier mellem disse tre kritiske CSS-enheder, hvilket hjælper dig med at skabe mere fleksible og vedligeholdelsesvenlige web-layouts.
Pixels (PX) er faste størrelsesenheder, der giver præcis kontrol, men mangler skalerbarhed, mens REM-enheder skalerer i forhold til rod-elementets skriftstørrelse, og EM-enheder skalerer i forhold til deres forældreelements skriftstørrelse. At konvertere mellem disse enheder kan være en udfordring, især når man arbejder med komplekse designs eller når man understøtter tilgængelighedsfunktioner som tekststørrelsesjustering. Vores PX, REM og EM-konverter gør denne proces enkel, så du kan fokusere på at skabe smukke, responsive designs.
Pixels (PX) er den mest grundlæggende og almindeligt anvendte CSS-enhed. En pixel er et enkelt punkt i et digitalt billedgitter og repræsenterer det mindste kontrollerbare element på en skærm. I CSS giver pixels en fast størrelsesenhed, der forbliver konsekvent uanset andre stilfaktorer.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6
Nøglekarakteristika for pixels:
REM (root em) enheder er relative enheder, der skalerer baseret på rod-elementets skriftstørrelse (typisk <html>
-elementet). Som standard indstiller de fleste browsere rod-skriftstørrelsen til 16px, hvilket gør 1rem lig med 16px, medmindre det ændres eksplicit.
1html {
2 font-size: 16px; /* Standard i de fleste browsere */
3}
4
5.element {
6 width: 12.5rem; /* Tilsvarende 200px med standard rod-skriftstørrelse */
7 font-size: 1rem; /* Tilsvarende 16px */
8 margin: 0.625rem; /* Tilsvarende 10px */
9}
10
Nøglekarakteristika for REM-enheder:
EM-enheder er relative enheder, der skalerer baseret på deres forældreelements skriftstørrelse. Hvis der ikke er angivet nogen skriftstørrelse for forælderen, vil EM'erne referere til den arvede skriftstørrelse.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Tilsvarende 16px (20px × 0.8) */
7 margin: 0.5em; /* Tilsvarende 8px (16px × 0.5) */
8}
9
Nøglekarakteristika for EM-enheder:
At forstå de matematiske forhold mellem PX, REM og EM-enheder er afgørende for nøjagtige konverteringer. Her er formlerne, der bruges i vores konverter:
For at konvertere pixels til REM-enheder, divider pixelværdien med rod-skriftstørrelsen:
For eksempel, med den standard rod-skriftstørrelse på 16px:
For at konvertere pixels til EM-enheder, divider pixelværdien med forældreelementets skriftstørrelse:
For eksempel, med en forælder-skriftstørrelse på 16px:
For at konvertere REM-enheder til pixels, gang REM-værdien med rod-skriftstørrelsen:
For eksempel, med den standard rod-skriftstørrelse på 16px:
For at konvertere EM-enheder til pixels, gang EM-værdien med forældreelementets skriftstørrelse:
For eksempel, med en forælder-skriftstørrelse på 16px:
For at konvertere REM-enheder til EM-enheder, skal du tage højde for både rod-skriftstørrelsen og forældreelementets skriftstørrelse:
Hvis både rod- og forældreskriftstørrelserne er de samme (f.eks. 16px), så er 1rem = 1em.
For at konvertere EM-enheder til REM-enheder, brug følgende formel:
Igen, hvis begge skriftstørrelser er ens, så er 1em = 1rem.
Vores enhedsomformer-værktøj gør det nemt at oversætte værdier mellem PX, REM og EM-enheder. Her er en trin-for-trin guide til effektiv brug af omformeren:
<html>
skriftstørrelseAt forstå hvornår man skal bruge hver CSS-enhed og hvordan man konverterer mellem dem er afgørende for effektiv webudvikling. Her er nogle praktiske anvendelser og scenarier, hvor vores enhedsomformer viser sig uvurderlig:
At konvertere mellem enheder er essentielt for at skabe virkelig responsive designs:
1/* Konverter faste pixelværdier til responsive REM-enheder */
2.container {
3 /* Fra: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* Fra: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9
At bruge relative enheder forbedrer tilgængeligheden ved at respektere brugerpræferencer:
Moderne designsystemer drager fordel af omtænksom enhedsbrug:
At skabe harmonisk typografi kræver omhyggelig enhedsvalg:
1/* Typografisk system ved hjælp af REM-enheder */
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 */
8
Når man implementerer designs fra værktøjer som Figma eller Photoshop:
Mens PX, REM og EM er de mest almindelige enheder, er der alternativer, der er værd at overveje:
Historien om CSS-enheder afspejler den bredere udvikling af webdesign, fra statiske layouts til dagens responsive, tilgængelige tilgange.
I de tidlige dage af CSS herskede pixels. Webdesignere skabte faste bredde-layouts, typisk 640px eller 800px brede for at imødekomme almindelige skærmopløsninger. Tilgængelighed og enhedsmangfoldighed var ikke større bekymringer, og pixel-perfekt kontrol var det primære mål.
Efterhånden som skærmstørrelserne blev mere forskellige, blev procentbaserede layouts populære. Designere begyndte at skabe mere fleksible designs, selvom typografi ofte forblev i pixel-enheder. Denne æra så introduktionen af EM-enheder i CSS, selvom deres anvendelse var begrænset på grund af kompleksiteten ved at håndtere kaskaderende skriftstørrelser.
Introduktionen af iPhone i 2007 transformerede webdesign. Pludselig skulle hjemmesider fungere på skærme så små som 320px brede. Dette katalyserede interessen for responsive designteknikker og relative enheder. Begrænsningerne ved EM-enheder (især den kaskaderende effekt) blev mere åbenlyse, efterhånden som designene blev mere komplekse.
Ethan Marcottes indflydelsesrige artikel om responsiv webdesign i 2010 ændrede, hvordan udviklere nærmede sig CSS-enheder. REM-enheden blev introduceret i CSS3, hvilket tilbød fordelene ved relativ skalerings uden de kaskaderende komplikationer ved EM-enheder. Browserunderstøttelsen for REM-enheder voksede støt i denne periode.
Dagens webudvikling omfavner en blanding af enheder til forskellige formål:
Denne udvikling afspejler webens overgang fra et dokumentbaseret medie til en kompleks applikationsplatform, der skal fungere på tværs af utallige enheder og kontekster.
1// Konverter mellem PX, REM og EM-enheder
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// Eksempel på brug
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
31
1:root {
2 /* Basis skriftstørrelser */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Almindelige pixelværdier konverteret til 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 /* Typografisk skala */
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/* Eksempel på brug */
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}
34
1// SCSS-funktioner til enhedsomregning
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// Eksempel på brug
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 // Brug af forældreskriftstørrelse (18px) til em-konvertering
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
26
1def px_to_rem(px, root_font_size=16):
2 """Konverter pixels til REM-enheder"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Konverter REM-enheder til pixels"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Konverter pixels til EM-enheder"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Konverter EM-enheder til pixels"""
15 return em * parent_font_size
16
17# Eksempel på brug
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
21
REM (root em) enheder er relative overfor rod-elementets skriftstørrelse (typisk <html>
-elementet), mens EM-enheder er relative overfor deres forældreelements skriftstørrelse. Denne nøgleforskel betyder, at REM-enheder opretholder konsekvent størrelsesforhold i hele dit dokument uanset indlejring, mens EM-enheder kan skabe en sammensætnings-effekt, når elementer er indlejret.
Der er ingen enkelt "bedste" enhed til alle situationer. En kombination af enheder er typisk mest effektiv:
Den ideelle tilgang er at bruge hver enhed til hvad den gør bedst inden for et sammenhængende system.
Den 16px standard blev etableret som en læsbarhedsstandard, der fungerer godt på tværs af enheder. Forskning har vist, at tekst omkring 16px er optimal til læsning på skærme ved typiske visningsafstande. Denne standard giver også et godt grundlag for tilgængelighed, hvilket sikrer, at teksten ikke er for lille for de fleste brugere.
Ja, CSS understøtter negative værdier for mange egenskaber ved hjælp af enhver enhedstype. Negative marginer, oversættelser og positioner er almindelige anvendelsestilfælde for negative værdier. Vores omformer håndterer negative værdier korrekt for alle enhedstyper.
EM-enheder sammensættes, når elementer er indlejret. For eksempel:
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}
10
Denne sammensætnings-effekt kan være nyttig til at skabe proportionale designs, men kræver omhyggelig administration for at undgå utilsigtet skalering.
Browsere håndterer subpixelværdier forskelligt. Nogle browsere runder til den nærmeste pixel, mens andre understøtter subpixel-rendering for glattere skalering. Dette kan lejlighedsvis forårsage små inkonsistenser på tværs af browsere, især med små REM/EM-værdier eller når der bruges transformationer. For de fleste anvendelsestilfælde er disse forskelle ubetydelige.
Der er ingen betydelig ydeevneforskel mellem at bruge pixels, REM eller EM-enheder i moderne browsere. Valget af enheder bør baseres på designkrav, responsiv adfærd og tilgængelighedsbehov snarere end ydeevneovervejelser.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 25. maj 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. 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/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Stop med at kæmpe med manuelle CSS-enhedsomregninger, og lad vores PX, REM og EM Enhedsomformer gøre arbejdet for dig. Uanset om du bygger en responsiv hjemmeside, opretter et designsystem eller bare lærer om CSS-enheder, vil dette værktøj spare dig tid og sikre nøjagtighed. Indtast dine værdier nu for at se, hvor nem enhedsomregning kan være!
Opdag flere værktøjer, der måske kan være nyttige for din arbejdsgang.