PX naar REM omrekenen + volledige tabel van 1 tot 128px | We.Inc
Reken px om naar rem en rem naar px met elke root-lettergrootte. Volledige tabel van 1 tot 128px met Tailwind-classes, een omzetter voor CSS-blokken en een hulp voor vloeiende clamp()-waarden.
PX naar REM omrekenen
Om pixels om te zetten naar rem deelt u de pixelwaarde door de root-lettergrootte. Met de browserstandaard van 16px is 24px gelijk aan 1.5rem en 12px gelijk aan 0.75rem. Typ een waarde in een van beide vakken om in twee richtingen om te rekenen, wijzig de root-grootte als uw site een andere basis gebruikt, of plak complete CSS-regels.
Gangbare formaten bij de standaard root van 16px
Pixels
Typisch gebruik
Bijschriften, kleine labels
Secundaire tekst, knoppen
Lopende tekst
Grote lopende tekst, kleine koppen
Sectiekoppen, padding van kaarten
Paginakoppen, ruimte tussen secties
Hero-koppen
Een omrekenaar in twee richtingen met een eigen root-grootte, een volledige tabel van 1 tot 128 pixels met de bijbehorende Tailwind-class, een omzetter voor complete CSS-blokken en een hulp die vloeiende clamp()-formaten schrijft.
Stel de root-lettergrootte in. Laat die op 16 staan, tenzij uw stylesheet een andere grootte op het html-element zet.
Typ in het pixelvak om rem te krijgen, of in het rem-vak om pixels te krijgen. Beide werken bij terwijl u typt.
Scrol door de tabel om elk formaat van 1 tot 128 pixels te vinden. Klik op een rij om de rem-waarde te kopiëren.
Plak CSS in de blokomzetter om elke px-waarde in één keer naar rem om te zetten. Nul wordt 0 en randen van 1px blijven in pixels, tenzij u die optie uitvinkt.
Gebruik de clamp()-hulp voor een lettergrootte die vloeiend meegroeit tussen een telefoon- en een desktopbreedte.
Houd de lettergrootte van html op 100% (de browserstandaard) in plaats van 62.5%. De 62.5%-truc maakt 1rem gelijk aan 10px, maar verkleint elk component van derden dat uitgaat van 16px.
Gebruik rem voor lettergroottes en de meeste witruimte, zodat de hele lay-out meeschaalt als iemand de standaard tekstgrootte van de browser vergroot.
Laat haarlijnranden en box-shadow-verschuivingen in px. Een rand van 1px die 0.0625rem wordt, kan bij sommige zoomniveaus wazig worden of verdwijnen.
Media queries in em of rem volgen ook de lettertype-instelling van de gebruiker. De meeste browsers behandelen 1em in een media query als de standaardgrootte van de browser, niet als uw html-regel.
Veelgestelde vragen
Hoeveel pixels is 1rem?
1rem is gelijk aan de lettergrootte van het root-element html. Browsers zetten die standaard op 16px, dus 1rem is 16px tenzij de site of de bezoeker dat verandert. Stelt een bezoeker de standaard tekstgrootte in op 20px, dan wordt 1rem 20px op elke site die de root-grootte niet in pixels heeft vastgezet.
Wat is het verschil tussen rem en em?
rem is altijd relatief aan de lettergrootte van het root-element html. em is relatief aan de lettergrootte van het element zelf (of van de ouder, als het op font-size wordt gebruikt). Geneste em-groottes vermenigvuldigen zich: een lijst van 1.2em binnen een lijst van 1.2em wordt uiteindelijk 1.44 keer de basis. rem stapelt nooit op, en daarom gebruiken de meeste design systems het.
Moet ik px of rem gebruiken voor lettergroottes?
Gebruik rem. Tekst in px negeert de standaard lettergrootte van de browser, die sommige mensen vergroten om prettig te kunnen lezen. Zoomen op de pagina werkt nog steeds met px, maar de voorkeur voor lettergrootte niet, dus rem is de toegankelijkere keuze.
Hoe vertalen Tailwind-classes zich naar rem?
In de standaard spacing-schaal van Tailwind is elke stap 0.25rem, wat 4px is bij een root van 16px. Dus p-4 is 1rem (16px) en gap-6 is 1.5rem (24px). Lettergroottes gebruiken namen: text-sm is 0.875rem en text-base is 1rem. De tabel op deze pagina toont de class voor elk formaat dat op de standaardschaal staat.
Stuurt deze tool mijn CSS ergens naartoe?
Nee. Elke omrekening draait in uw browser en niets wat u typt of plakt wordt geüpload.
Waarom rem bestaat
Pixels in CSS zijn vaste eenheden. Een kop van 32px blijft 32px, ook als een bezoeker zijn browser heeft gevraagd grotere tekst te gebruiken. De eenheid rem lost dat op door formaten te koppelen aan de root-lettergrootte, die standaard de instelling van de bezoeker volgt. Verander één getal en elk op rem gebaseerd formaat op de pagina schaalt mee.
Daardoor past rem goed bij tekst, padding, marges en de breedte van tekstkolommen. Pixels blijven zinvol voor dingen die niet met de tekst mee moeten schalen, zoals een scheidingslijn van 1px of het formaat van een afbeelding met vaste pixelafmetingen.
rem en em naast elkaar
Het live voorbeeld op deze pagina zet dezelfde grootte van 1.25 drie niveaus diep, één keer in em en één keer in rem. De em-versie groeit bij elk niveau, omdat elk kind de grootte van zijn ouder vermenigvuldigt. De rem-versie blijft op elke diepte gelijk, omdat die altijd naar de root kijkt.
em blijft nuttig als iets moet meeschalen met zijn eigen tekst, zoals de padding binnen een knop of de ruimte na een icoon. Zet de lettergrootte van de knop in rem en de padding in em, dan verandert de hele knop van formaat als u de lettergrootte aanpast.
Vloeiende formaten met clamp()
clamp(min, preferred, max) kiest de voorkeurswaarde, maar gaat nooit onder het minimum of boven het maximum. Met een combinatie van rem en vw als voorkeurswaarde groeit een kop vloeiend mee met de vensterbreedte en respecteert hij toch de lettergrootte van de gebruiker.
De hulp berekent de lijn tussen twee punten, bijvoorbeeld 32px op een telefoon van 375px breed en 56px op een desktop van 1280px, en schrijft die als een expressie van rem plus vw. Test het resultaat bij een paar breedtes, want een heel steile vw-helling kan tekst sneller laten groeien dan de regellengte.
Omrekenen
Root-lettergrootte (px)
Pixels
(root {n}px)
rem kopiëren
px kopiëren
Root {n}px
Een CSS-blok omzetten
CSS met px
Dezelfde CSS in rem
Waarden van 1px in px houden
Omgezette CSS kopiëren
Vloeiend formaat met clamp()
Kleinste formaat (px)
Grootste formaat (px)
Vanaf breedte (px)
Tot breedte (px)
Voer formaten boven nul in en een Tot-breedte die groter is dan de Vanaf-breedte.
clamp() kopiëren
Verander de grootte van het venster om deze regel te zien groeien.
em stapelt op, rem niet
Elk niveau hieronder zet font-size: 1.25 in zijn eenheid, drie niveaus diep genest.
Niveau {n}
Volledige tabel px naar rem
Root {n}px. Klik op een rij om de rem-waarde te kopiëren.
Tailwind-classes worden alleen getoond bij een root van 16px, het formaat waarop hun schaal is gebouwd.
{v} gekopieerd.
px naar rem bij een root van {n}px, 1 tot 128 pixels, met Tailwind-classes