De eerste keer dat een ontwerper me een spec overhandigde die zei & quot; body text 16px, kopjes 28px, kleine lettertjes 13px" en de front-end lead zei " maar we verzenden alles in rem, & quot; Ik deed de verdeling met de hand in een rekenmachine-app Zestien gedeeld door zestien is één, achtentwintig gedeeld door zestien is één komma zeven vijf, dertien gedeeld door zestien is nul komma acht één twee vijf. Vervolgens veranderde de basislettergrootte in tien pixels voor een & quot;62,5%" setup op een ander project, en ik deed het allemaal opnieuw. Na de derde keer heb ik een kleine converter werk van elke tool een kleine converter gebouwd, heb het werk op een stuk stilletjes, heb het gemaakt, elke machine, het werk opgeslagen.
tl;dr: Een CSS unit converter verandert een waarde in één eenheid - px, rem, em, pt, of % - in de equivalente waarde in elke andere eenheid, op basis van een root lettergrootte die u beheert (standaard 16px) Om px naar rem te converteren, deelt u de pixels door de root lettergrootte:
24px ÷ 16 = 1.5rem. Om de andere kant op te gaan, vermenigvuldigt u:1.5rem × 16 = 24px. de CSS-eenheidconverter doet dit direct voor elke eenheid tegelijk, draait volledig in uw browser en bevat een px-naar-rem-referentietabel waaruit u kunt kopiëren.
Deze gids behandelt hoe de eenheden zich verhouden, waarom de basislettergrootte er zo toe doet, wanneer te bereiken voor elke eenheid, en de exacte wiskunde die de converter uitvoert Ik heb een heleboel interfaces gestyled over WordPress thema's, de WP Adminify admin UI, en React dashboards, en de eenheidsvraag komt in alle van hen De regels zijn eenvoudig als je eenmaal ziet het enkele nummer alles hangt op.
Waarom is px naar rem conversie belangrijk?
Pixels zijn de eenheid die bijna elk ontwerptool exporteert Figma, Sketch, en Photoshop denken allemaal in pixels, dus een handoff spec is een lijst van pixelwaarden Pixels zijn ook gemakkelijk te redeneren omdat één CSS pixel een vaste referentiegrootte is die niet verandert wanneer de gebruiker iets aanpast.
Die vastheid is precies het probleem voor toegankelijke, responsieve interfaces Wanneer iemand zijn browser vergroot' s standaard lettergrootte - een instelling waar veel mensen met weinig zicht op vertrouwen - tekstgrootte in vaste pixels negeert de verandering volledig Tekstgrootte in remschalen ermee Hetzelfde geldt voor browserzoomen op sommige oudere configuraties en van gebruikersstylesheets Als u wilt dat uw typografie de voorkeuren van de lezer respecteert' s, dan heeft u de grootte in een relatieve eenheid, en rem is degene die zich voorspelbaar gedraagt over een hele pagina.
Dus de gemeenschappelijke workflow is: design in pixels, ship in rem Dat laat je de hele dag aan de deling doen, en deling is waar kleine fouten insluipen Schrijven 0.8125rem in plaats van 0.875rem voor een 13px waarde is het soort typefout dat naar productie wordt verzonden en één label er subtiel verkeerd uit laat zien Een converter neemt dat risico weg, wat de hele reden is dat ik er één binnen bereik houd Als je over veel van deze taken heen werkt, geldt het bredere Webontwikkelaar Toolkit dekt waar eenheidsconversie past naast de andere dagelijkse klussen.
Wat is het verschil tussen px, rem, em, pt en %?
Elk van deze eenheden wordt opgelost in een aantal CSS-pixels tijdens het renderen, een relatie CSS-waarden en eenheden Niveau 4 pins down: de referentiepixel is gedefinieerd tegen een 96 dpi display, niet tegen je scherm Het verschil is waar ze mee gemeten worden.
px is de CSS referentiepixel Het is een absolute eenheid in de zin dat het niet afhankelijk is van enige lettergrootte. 1px is 1px. Dit maakt het voorspelbaar, maar reageert ook niet op gebruikersvoorkeuren.
rem betekent "root em." Eén rem is gelijk aan de lettergrootte van het hoofdelement - de html element. Standaard is dat 16px, dus 1rem is 16px, 1.5rem is 24px, en 0.5rem is 8px. Omdat het altijd aan de wortel gebonden is, betekent een remwaarde overal in het document hetzelfde, hoe diep genest het element ook is.
em is relatief aan de lettergrootte van de huidige element. Als een element' s lettergrootte 20px is, dan 1em binnen is het 20px, 1.5em is 30px, enzovoort. 't Paaltje is dat em compounds: als een ouder sets font-size: 1.2em en een kind gaat ook onder 1.2em, het kind' s effectieve grootte is 1,2 × 1,2 van de grootouder Dit hulpmiddel gaat uit van een element met de grootte aan de basis, dus em en rem lezen hetzelfde - en je modelleert een specifieke em-context door de basislettergrootte in te stellen op dat element' s grootte.
pt is het punt, geërfd van printtypografie CSS definieert één inch als 96 pixels en 72 punten, dus 1pt is gelijk aan 96/72 ≈ 1.333px, en 1px is gelijk aan 0.75pt. Punten horen thuis in printstylesheets; op het scherm zijn ze slechts een vast veelvoud van de referentiepixel.
% voor lettergrootte is een percentage van de bovenliggende waarde (of, aan de grondtoon, de grondtal). 100% is gelijk aan de referentiegrootte en 50% is gelijk aan de helft. Op een 16px basis, 100% is 16px en 150% is 24px.
Hier ziet u hoe de algemene waarden op één lijn liggen met de standaard 16px root:
| px | rem | em | pt | % |
|---|---|---|---|---|
| 12 | 0,75 | 0,75 | 9 | 75 |
| 14 | 0,875 | 0,875 | 10.5 | 87,5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112,5 |
| 24 | 1,5 | 1,5 | 18 | 150 |
| 32 | 2 | 2 | 24 | 200 |
de CSS-eenheidconverter genereert deze hele tabel voor elke basis die u instelt, zodat u een hele typeschaal tegelijk kunt bekijken.
Hoe verandert de basislettergrootte alles?
De basis (root) lettergrootte is de spil voor elke relatieve eenheid Verander het en elke rem, em, en % conversie verandert mee, terwijl px en pt blijven zitten.
De browser standaard is 16px, en daarom 1rem is normaal 16px. Maar je kunt de wortel op alles instellen. Een populaire patroonsets html { font-size: 62.5%; }, waardoor de wortel 10px is (62,5% van 16). Nu 1rem is een schone 10px, en rem math wordt & quot; move the decimal point": 1.6rem is 16px, 2.4rem is 24px, 0.8rem is 8px Teams nemen dit over zodat de getallen in hun stylesheets bijna als pixels lezen terwijl ze nog steeds schalen met gebruikersvoorkeuren.
Om dat in de converter te modelleren, zet je de basislettergrootte op 10 en lees je de remkolom Een 24px waarde wordt nu weergegeven als 2.4rem in plaats van 1.5rem Zo redeneer je ook over em in een component die zijn eigen lettergrootte instelt: als een kaart instelt font-size: 20px, dan zijn de em-waarden erin relatief ten opzichte van 20, dus stel de basis in op 20 om te zien wat 1.5em besluit tot.
De fout die ik het vaakst zie is vergeten met welke basis een waarde is berekend Iemand converteert 24px naar 1.5rem uitgaande van een 16px root, laat het dan vallen in een project met de 62.5% truc waarbij de root 10px is - en 1.5rem er is 15px, niet 24px De eenheid is relatief, dus het getal betekent pas iets als je de basis kent Telkens als ik een remwaarde tussen projecten plak, controleer ik eerst de grootte van het rootlettertype.
Hoe converteer je px naar rem en rem met de hand naar px?
De wiskunde is één deling en één vermenigvuldiging.
px naar rem: deel de pixelwaarde door de hoofdlettergrootte.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
rem naar px: vermenigvuldig de remwaarde met de hoofdlettergrootte.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px naar em gebruikt dezelfde formule als rem wanneer het element op de basislettergrootte staat, dus 24px ÷ 16 = 1.5em. Het verschil is conceptueel, niet rekenkundig: em wordt gemeten aan de hand van het huidige element, dus als dat element' s grootte verschilt van de wortel, gebruik je de grootte ervan als basis.
px naar pt: vermenigvuldig met 0,75, omdat 1px = 0.75pt. ook weer 16px × 0.75 = 12pt. De andere kant op gaan, pt × 1.333 = px.
px naar %: deel door de grondtal en vermenigvuldig met 100 Dus 24px ÷ 16 × 100 = 150%.
Niets van dit alles is moeilijk, maar het veertig keer doen tijdens het stylen van een component is waar vermoeidheid typefouten produceert Dat is precies het soort repetitieve, foutgevoelige taak Productiviteitstools voor ontwikkelaar filosofie zegt automatiseren - ontlasten van de rekenkunde zodat je aandacht blijft op het ontwerp.
Wanneer moet je elke unit gebruiken?
Er is niet één correcte eenheid; er is een juiste eenheid voor elke taak.
Rem gebruiken voor lettergroottes. Dit is de sterkste aanbeveling in de lijst Rem schaalt met de gebruiker' s browser lettergrootte voorkeur, wat een echte toegankelijkheid wint, en omdat het verankerd is aan de root wordt het niet onverwacht samengesteld De meeste teams sizen al hun type in rem.
Gebruik rem of px voor spatiëring, afhankelijk van uw systeem. Veel ontwerpsystemen drukken marge en opvulling in rem uit, zodat de afstand tussen de schalen en het type wordt weergegeven. Anderen houden de afstand in px voor pixel-perfecte lay-outs. Beide zijn verdedigbaar; kies er een en wees consistent.
Gebruik em voor dingen die moeten schalen met hun eigen element. Opvulling op een knop die zou moeten groeien met de knop' s lettergrootte is een klassieke em gebruik - stel de opvulling in em en het volgt de tekst automatisch Pictogramgrootte ten opzichte van aangrenzende tekst is een andere.
Gebruik px voor randen en fijne details. a 1px border moet meestal blijven 1px; je wilt zelden dat een haarlijn schaalt met de lettergrootte. Breekpunten voor mediaquery's worden ook vaak in px geschreven, hoewel sommigen daar de voorkeur geven aan em voor zoomgedrag.
Gebruik pt alleen in printstylesheets. Als je iets stylt voor @media print, punten zijn de oorspronkelijke eenheid van druk en het gebruiken waard Op het scherm, verkiest px of rem.
Gebruik % voor vloeistofbreedtes en soms lettergroottes. Percentage is overal in lay-out (width: 50%), en als lettergrootte wordt het soms aan de basis gebruikt voor de 62,5%-truc.
Wat zijn de veelgemaakte fouten met CSS-eenheden?
De eerste is het probleem van de basis-mismatch dat al is beschreven: converteren tegen de verkeerde grootte van het hoofdlettertype Altijd uw root kennen voordat u een remnummer vertrouwt.
De tweede is te precieze remwaarden Sommige conversies delen niet gelijkmatig - 15px bij een 16px basis is 0,9375rem, en 13px is 0,8125rem Die lange decimalen zijn exact maar lelijk, en door ze te hard af te ronden (zeg naar 0,94rem) verschuift de weergegeven grootte met een fractie van een pixel Mijn regel: houd drie of vier decimalen voor rem, of kies basis - en groottewaarden die netjes delen De converter rondt verstandig af en trimt achter nullen zo 24px leest als 1.5rem eerder 1.5000rem.
De derde is compounding em. nesting elementen die elke set een em lettergrootte vermenigvuldigt het effect, dus een diep geneste item kan eindigen veel groter of kleiner dan bedoeld Als je em verrassend, die compounding is bijna altijd waarom - schakel die naar rem en de verrassing verdwijnt.
De vierde gaat ervan uit dat pt en px uitwisselbaar zijn. Dat zijn ze niet; 12pt is 16px, niet 12px. Het mixen ervan in een stylesheet die het scherm en de print omspant, is een subtiele bug.
Hoe gaat de Toolz.dev converter om met de wiskunde?
Onder de motorkap gebruikt de converter één idee: elke eenheid uitdrukken als een aantal pixels, vervolgens converteren door pixels Elke eenheid heeft een vaste & quot; pixels per unit" gegeven de basislettergrootte - px is 1, rem en em zijn de basis, pt is 96/72 en % is basis/100 Om te converteren, vermenigvuldigt het de invoer met zijn eenheid's pixels-per-eenheid om een pixelwaarde te krijgen, dan deelt door de doeleenheid's pixels-per-eenheid Die enkele doorgang geeft elke eenheid in één keer, daarom zie je px, rem, em% samen als je werkt samen.
Het parseert ook waarden met eenheden eraan, dus plakken 24px vult zowel het nummer als de eenheid voor u in Resultaten worden afgerond op een paar decimalen en ontdaan van achterliggende nullen voor leesbaarheid, en elk heeft een kopieerknop met één klik die de waarde kopieert met het achtervoegsel van de eenheid klaar om in CSS te plakken Alles draait client-side - niets dat u typt wordt geüpload - wat overeenkomt met de privacy-first aanpak achter elk gereedschap op de site.
Als u ook kleuren kiest of schaduwen bouwt voor hetzelfde onderdeel, zal de CSS-gradiëntgenerator en Box Shadow Generator leef één klik verwijderd, en het bredere unit converter verwerkt fysieke eenheden zoals lengte en gewicht wanneer uw werk buiten CSS afdwaalt.
Veelgestelde vragen
Hoe converteer ik px naar REM?
Deel de pixelwaarde door de hoofdlettergrootte. Bij de standaard browser van 16px, rem = px ÷ 16, dus 16px is 1rem, 24px is 1,5rem en 8px is 0,5rem. Voer de pixelwaarde in de converter in en het REM-equivalent verschijnt onmiddellijk op de lettergrootte van de basis die u hebt ingesteld.
Hoe converteer ik REM naar PX?
Vermenigvuldig de REM-waarde met de hoofdlettergrootte. Op een basis van 16px, PX = REM × 16, dus 1REM is 16px, 1.5REM is 24px en 0.75REM is 12px. Wijzig de basislettergrootte in de tool als uw HTML-element een andere waarde gebruikt.
Wat is de standaardgrootte van het root-lettertype?
Browsers zetten het html element standaard op 16px, daarom begint deze converter op 16 Omdat 1rem altijd gelijk is aan de root lettergrootte, maakt die standaard 16px gelijk aan precies 1rem Gebruikers kunnen hun browser wijzigen' s standaard tekstgrootte, wat één reden is waarom rem de voorkeur heeft voor toegankelijke, schaalbare typografie.
Wat is het verschil tussen REM en EM?
Een rem is altijd relatief ten opzichte van de root html lettergrootte, dus het blijft consistent over de hele pagina Een em is relatief ten opzichte van de lettergrootte van het huidige element, dus het kan compound wanneer geneste elementen elk hun eigen grootte instellen Stel de basis lettergrootte in de tool om een specifieke em context te modelleren.
Hoe verhouden PX en PT zich in CSS?
CSS definieert één inch als 96 pixels en 72 punten, dus 1pt is gelijk aan 96/72 ≈ 1.333px, en 1px is gelijk aan 0.75pt Punten komen uit printtypografie; op het scherm zijn ze een vast veelvoud van de CSS-referentiepixel Gebruik px of rem voor schermwerk en reserveer pt voor printstylesheets.
Wat doet de truc van 62,5% lettergrootte?
Door de html-lettergrootte in te stellen op 62,5% wordt de root-lettergrootte 10px, dus 1rem wordt een handige 10px en rem-wiskunde verandert in het verplaatsen van de decimaal - 1,6rem is 16px, 2,4rem is 24px Om dit in de converter te modelleren, stelt u de basislettergrootte in op 10 en leest u de remkolom.
Moet ik px of rem gebruiken voor lettergroottes?
Rem heeft over het algemeen de voorkeur voor lettergroottes omdat het schaalt met de gebruiker's voorkeur voor de lettergrootte van de browser, wat de toegankelijkheid verbetert, terwijl vaste px dat niet doet. Veel teams ontwerpen in px en converteren naar rem voor de uiteindelijke CSS. Lay-outdetails zoals randen blijven vaak in px.
Waarom heeft de omgezette waarde soms lange decimalen?
Sommige conversies zijn niet exact - 15px bij een 16px basis is 0,9375rem, en pt-waarden produceren vaak herhalende decimalen Het gereedschap rondt af naar een paar decimalen en trimt achter nullen voor leesbaarheid Voor pixel-perfecte lay-outs, ronde rem-waarden naar twee of drie decimalen of kies een basis die uw maten netjes verdeelt.
