PX naar REM Omzetter

De standaard van de browser is 16px.

Wat is het PX naar REM Omzetter

Een px naar rem omzetter vertaalt een CSS-maat tussen pixels en rem-eenheden. Eén rem is gelijk aan de basislettergrootte van de pagina, die browsers standaard op 16px zetten, dus 16px is 1rem en 24px is 1,5rem. Typ een waarde in een van de velden en het andere wordt direct bijgewerkt. Pas het veld voor de basislettergrootte aan als je project een andere basis gebruikt (een veelgebruikte truc is de basis op 62,5% zetten, zodat 10px gelijk is aan 1rem).

Hoe te gebruiken

  1. Stel de basislettergrootte in als je project afwijkt van de standaard van 16px.
  2. Typ een pixelwaarde in het veld Pixels om het rem-equivalent te zien.
  3. Of typ een rem-waarde in het veld REM om het pixel-equivalent te zien.
  4. Kopieer elk resultaat met het kopieerpictogram naast het veld.
  5. Klik op Wissen om de velden te resetten en opnieuw te beginnen.

Wanneer te gebruiken

Bouw je een responsieve lay-out en heb je je kop van 24px in rem nodig? Typ 24 en je krijgt 1,5rem, klaar om in je stylesheet te plakken. Een ontwerp van vaste pixels naar schaalbare rem omzetten houdt tekst en witruimte in de pas met de browserinstelling van de lezer, dus wie zijn standaardlettergrootte vergroot, ziet de hele lay-out meegroeien in plaats van vast te zitten op jouw pixelwaarden.

Veelgestelde vragen

Hoe zet ik px om naar rem?

Deel de pixelwaarde door de basislettergrootte. Met de standaard van 16px is 24px gelijk aan 24 / 16 = 1,5rem en 8px aan 8 / 16 = 0,5rem. Andersom vermenigvuldig je de rem-waarde met de basislettergrootte: 1,25rem bij een basis van 16px is 1,25 * 16 = 20px.

Wat is de standaard basislettergrootte?

Browsers gebruiken 16px als standaard basislettergrootte, dus deze tool begint daar. Als je CSS de font-size van het html-element wijzigt (bijvoorbeeld naar 62,5%, wat de basis 10px maakt), pas dan het veld voor de basislettergrootte aan zodat de omzetting bij je project past.

Waarom rem gebruiken in plaats van px in CSS?

rem-eenheden schalen mee met de basislettergrootte, die de grootte respecteert die een lezer in zijn browserinstellingen heeft gekozen. Lettertypen, marges en padding in rem opgeven laat de hele lay-out met die voorkeur groeien of krimpen, wat beter is voor toegankelijkheid dan vaste pixels.

Kan ik deze tool delen met mijn ingevulde gegevens?

Ja. De URL wordt automatisch bijgewerkt terwijl je typt. Kopieer de link uit de adresbalk of gebruik de Deel-knop, iedereen die de link opent, ziet jouw gegevens al ingevuld.

Gerelateerde tools