CSS-eenheden-omzetter

Wat is CSS-eenheden-omzetter?

De CSS-eenheden-omzetter is een gratis tool in de browser die één CSS-lengte vertaalt naar zeven veelgebruikte eenheden: px, rem, em, pt, %, vw en vh. Front-endontwikkelaars en webdesigners gebruiken hem om een lay-out tussen absolute pixels en responsieve eenheden te verplaatsen, om te controleren met hoeveel pixels een rem overeenkomt bij een aangepaste root-lettergrootte, of om een pt-waarde uit de printwereld om te zetten naar schermpixels. Omdat rem afhangt van de root-lettergrootte, em en % van de lettergrootte van het bovenliggende element, en vw/vh van de viewport, stelt de omzetter alle vier als aanpasbare instellingen beschikbaar. Typ een waarde, kies de bron-eenheid, en elk resultaatveld wordt tegelijk bijgewerkt. Een kant-en-klaar CSS-fragment vermeldt alle zeven equivalenten als font-size-declaraties.

CSS-eenheden-omzetter gebruiken

1. Open Instellingen en stel de root-lettergrootte in (de html font-size waarop rem is gebaseerd), de lettergrootte van het bovenliggende element (voor em en %) en de breedte en hoogte van de viewport (voor vw en vh).
2. Typ het getal dat je wilt omzetten in het waardeveld.
3. Kies de bron-eenheid in het Van-uitklapmenu: px, rem, em, pt, %, vw of vh.
4. Lees elk equivalent af in de gelabelde, alleen-lezen resultaatvelden; ze worden allemaal automatisch opnieuw berekend wanneer je de waarde, de eenheid of een instelling wijzigt.
5. Kopieer het gegenereerde CSS-fragment om alle zeven font-size-equivalenten rechtstreeks in je stylesheet te plakken.

Voorbeelden

Root 16px, waarde 16, Van px

rem = 1

Root 10px, waarde 2, Van rem

px = 20

waarde 16, Van px

pt = 12

Veelgestelde vragen

Tussen welke eenheden zet het om?

Zeven CSS-lengte-eenheden: px, rem, em, pt, %, vw en vh. Elke daarvan kan de bron zijn, en alle zeven equivalenten worden tegelijk getoond.

Waarom moet ik de root-, bovenliggende en viewport-groottes instellen?

Deze eenheden zijn relatief. rem is een veelvoud van de root-lettergrootte (html), em en % zijn relatief ten opzichte van de lettergrootte van het bovenliggende element, en vw/vh zijn percentages van de breedte en hoogte van de viewport. Door ze in Instellingen op te geven, weet de omzetter waar elke relatieve eenheid naar verwijst.

Hoe wordt pt behandeld?

CSS definieert 96px = 1in = 72pt, dus 1pt is gelijk aan 4/3 px en 1px is gelijk aan 0,75pt. De omzetter gebruikt deze vaste verhouding, onafhankelijk van lettergrootte of viewport.

Wat gebeurt er als een waarde of instelling ongeldig is?

Als de waarde geen eindig getal is, of als een van de root-, bovenliggende of viewport-groottes ontbreekt, nul of negatief is, tonen de resultaatvelden een streepje (—) totdat je geldige getallen opgeeft.

Wordt er iets naar een server gestuurd?

Nee. Alle omzettingen worden volledig aan de clientzijde in je browser uitgevoerd, zonder upload en zonder serveraanroepen, dus de waarden die je invoert verlaten nooit je apparaat.