Das erste Mal, als mir ein Designer eine Spezifikation überreichte, die & quot; Körpertext 16 px, Überschriften 28 px, Kleingedrucktes 13 px" und die Front-End-Leitung sagte " aber wir versenden alles rem, & quot; Ich habe die Division von Hand in einer Taschenrechner-App durchgeführt Sechzehn über sechzehn ist eins, achtundzwanzig über sechzehn ist ein Punkt sieben fünf, dreizehn über sechzehn ist null Punkt acht eins zwei fünf. Dann änderte sich die Basisschriftgröße auf zehn Pixel für ein "62,5% " Setup auf einem anderen Projekt, und ich habe alles noch einmal gemacht. Nach dem dritten Mal habe ich einen kleinen Flow-Fehler einen kleinen Flow-Fehler gespeichert.
tl; dr: Ein CSS-Einheitenkonverter verwandelt einen Wert in einer Einheit - px, rem, em, pt oder % - in den Äquivalentwert in jeder anderen Einheit, basierend auf einer von Ihnen kontrollierten Stammschriftgröße (standardmäßig 16 px).Um px in rem umzuwandeln, teilen Sie die Pixel durch die Stammschriftgröße:
24px ÷ 16 = 1.5remUm in die andere Richtung zu gehen, multiplizieren Sie:1.5rem × 16 = 24pxdrohen der CSS-Einheitskonverter Erfüllt dies sofort für jede Einheit auf einmal, läuft vollständig in Ihrem Browser und enthält eine px-zu-rem-Referenztabelle, aus der Sie kopieren können.
Diese Anleitung behandelt, wie die Einheiten zusammenhängen, warum die Basisschriftgröße so wichtig ist, wann man zu jeder Einheit greifen muss und die genaue Mathematik, die der Konverter ausführt. Ich habe viele Schnittstellen über WordPress-Themes hinweg gestylt, die WP Adminify-Administrator-Benutzeroberfläche und dashboards reagieren, und in allen kommt die Einheitsfrage auf. Die Regeln sind einfach, sobald Sie die einzelne Zahl sehen, an der alles hängt.
Warum spielt die Umwandlung von px in rem eine Rolle?
Pixel sind die Einheit, die fast jedes Designtool exportiert. Figma, Sketch und Photoshop denken alle in Pixeln, daher ist eine Übergabespezifikation eine Liste von Pixelwerten. Pixel sind auch leicht zu verstehen, da ein CSS-Pixel eine feste Referenzgröße ist, die sich nicht ändert, wenn der Benutzer etwas anpasst.
Diese Festigkeit ist genau das Problem für zugängliche, responsive Schnittstellen Wenn jemand seinen Browser erhöht' s Standardschriftgröße - eine Einstellung, auf die sich viele Menschen mit Sehschwäche verlassen - Textgröße in festen Pixeln ignoriert die Änderung vollständig Textgröße in rem-Skalen mit ihm Das Gleiche gilt für Browser-Zoom auf einigen älteren Konfigurationen und für Benutzer-Stylesheets Wenn Sie möchten, dass Ihre Typografie den Reader respektiert & #39; s-Präferenzen, Sie größen es in einer relativen Einheit, und rem ist derjenige, der sich vorhersehbar auf einer ganzen Seite verhält.
Der gängige Workflow ist also: Design in Pixeln, Ship in rem Damit macht man den ganzen Tag Division, und bei Division schleichen sich kleine Fehler ein Schreiben 0.8125rem anstelle 0.875rem Für einen 13-px-Wert ist die Art von Tippfehler, der in die Produktion geliefert wird und ein Etikett subtil falsch aussehen lässt. Ein Konverter beseitigt dieses Risiko, was der ganze Grund ist, warum ich einen in Reichweite halte. Wenn Sie viele dieser Aufgaben bearbeiten, ist das breiter Webentwickler-Toolkit Umfasst, wo die Einheitenumstellung neben die anderen alltäglichen Arbeiten passt.
Was ist der Unterschied zwischen px, rem, em, pt, und %?
Jede dieser Einheiten löst sich zum Zeitpunkt des Renderns auf eine Anzahl von CSS-Pixeln auf, eine Beziehung CSS-Werte und -Einheiten Stufe 4 Pins runter: das Referenzpixel ist gegen ein 96 dpi Display definiert, nicht gegen deinen Bildschirm, der Unterschied ist, woran sie gemessen werden.
px Ist das CSS-Referenzpixel Es ist eine absolute Einheit in dem Sinne, dass es von keiner Schriftgröße abhängt. 1px ist 1px. Dadurch ist es vorhersehbar, reagiert aber auch nicht auf Benutzerpräferenzen.
Rem Mittel & quot; root em." One rem entspricht der Schriftgröße des Wurzelelements - der html Element. Standardmäßig sind das 16 px, also 1rem ist 16px, 1.5rem ist 24px, und 0.5rem ist 8px. Weil er immer an die Wurzel gebunden ist, bedeutet ein Rem-Wert überall im Dokument dasselbe, egal wie tief das Element verschachtelt ist.
em Relativ zur Schriftgröße der Aktuelles Element. Wenn ein Element' s Schriftgröße 20 px ist, dann 1em Im Inneren sind es 20 px, 1.5em 30 px ist, und so weiter Der Haken ist, dass em Verbindungen: wenn ein Elternteil setzt font-size: 1.2em Und ein Kind setzt auch 1.2emDie effektive Größe von child's beträgt 1,2 × 1,2 des Großelternteils. Dieses Tool nimmt ein Element an, das an der Basis dimensioniert ist, also lesen em und rem dasselbe - und Sie modellieren einen bestimmten em-Kontext, indem Sie die Basisschriftgröße auf die Größe dieses Elements und #39;s festlegen.
pt Ist der Punkt, geerbt von der Drucktypografie CSS definiert einen Zoll als 96 Pixel und 72 Punkte, also 1pt Entspricht 96,333 px und 72 1px Entspricht 0,75 pt. Punkte gehören in Druckstylesheets; auf dem Bildschirm sind sie nur ein festes Vielfaches des Referenzpixels.
% Die Schriftgröße ist ein Prozentsatz der übergeordneten Schriftart (oder, an der Wurzel, der Basis). 100% Gleich der Referenzgröße ist und 50% Entspricht der Hälfte davon Bei einer 16-px-Basis, die 100% 16 px ist und 150% 24 px ist.
So richten sich die gemeinsamen Werte an der Standard-16-PX-Root: aus
| 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 |
der CSS-Einheitskonverter Generiert diese ganze Tabelle für jede von Ihnen festgelegte Basis, sodass Sie eine ganze Typskala gleichzeitig betrachten können.
Wie verändert die Basisschriftgröße alles?
Die Basis (root) Schriftgröße ist der Pivot für jede relative Einheit Ändern Sie sie und jede rem, em, und % Konvertierung ändert sich mit ihr, während px und pt stehen bleiben.
Der Browser-Standard ist 16 px, weshalb 1rem Normal ist 16pxAber man kann die Wurzel auf alles setzen Ein beliebtes Muster setzt html { font-size: 62.5%; }1, was die Wurzel zu 10 px macht (62,5% von 16).Jetzt 1rem ist ein sauberer 10px& rem math wird zu & quot; verschieben Sie den Dezimalpunkt": 1,6 rem ist 16 px, 2,4 rem ist 24 px, 0,8 rem ist 8 px. Teams übernehmen dies, sodass die Zahlen in ihren Stylesheets fast wie Pixel gelesen werden, während sie immer noch mit Benutzereinstellungen skalieren.
Um das im Konverter zu modellieren, die Basisschriftgröße auf 10 setzen und die rem-Spalte lesen Ein 24 px-Wert zeigt nun als 2,4 rem statt 1,5 rem an So macht man sich auch Gedanken über em in einer Komponente, die ihre eigene Schriftgröße festlegt: wenn eine Karte setzt font-size: 20pxWenn dann die darin enthaltenen em-Werte relativ zu 20 sind, setzen Sie die Basis also auf 20, um zu sehen, was 1.5em Entschliesst sich zu.
Der Fehler, den ich am häufigsten sehe, ist zu vergessen, gegen welche Basis ein Wert berechnet wurde Jemand wandelt 24 px in 1,5 rem um, wenn er eine 16 px-Wurzel annimmt, und lässt es dann in ein Projekt fallen, das den 62,5% Trick ausführt, bei dem die Wurzel 10 px - und 1,5 rem 15 px, nicht 24 px. Die Einheit ist relativ, also bedeutet die Zahl erst etwas, wenn man die Basis kennt Immer wenn ich einen rem-Wert zwischen Projekten einfüge, überprüfe ich zuerst die Stammschriftgröße.
Wie konvertiert man px in rem und rem in px von Hand?
Die Mathematik besteht aus einer Division und einer Multiplikation.
Px zu rem: Teilen Sie den Pixelwert durch die Stammschriftgröße.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
rem zu px: Multiplizieren Sie den rem-Wert mit der Stammschriftgröße.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px bis em Verwendet die gleiche Formel wie rem, wenn das Element auf der Basisschriftgröße sitzt, also 24px ÷ 16 = 1.5em. Der Unterschied ist konzeptionell, nicht arithmetisch: em wird an dem aktuellen Element gemessen, also wenn dieses Element' s Größe von der Wurzel abweicht, verwenden Sie seine Größe als Basis.
px zu pt: Mit 0,75 multiplizieren, denn 1px = 0.75ptdrohen so 16px × 0.75 = 12pt. In die andere Richtung gehen, pt × 1.333 = pxdrohen
px zu %: Durch die Basis dividieren und mit 100 multiplizieren Also 24px ÷ 16 × 100 = 150%drohen
Nichts davon ist schwer, aber vierzig Mal beim Styling einer Komponente zu tun, ist der Punkt, an dem Ermüdung Tippfehler erzeugt Genau das ist die Art von sich wiederholenden, fehleranfälligen Aufgaben Entwicklerproduktivitätstools Die Philosophie sagt, die Arithmetik zu automatisieren - abzuladen, damit Ihre Aufmerksamkeit auf dem Design bleibt.
Wann sollten Sie jede Einheit verwenden?
Es gibt keine einzige richtige Einheit; Für jeden Job gibt es eine richtige Einheit.
Rem für Schriftgrößen verwenden. Dies ist die stärkste Empfehlung in der Liste Rem skaliert mit dem Benutzer' s Browser Schriftgröße Präferenz, die ein echter Zugänglichkeit Gewinn ist, und weil es an der Wurzel verankert ist es nicht unerwartet zusammensetzen Die meisten Teams größen alle ihre Art in rem.
Verwenden Sie je nach System rem oder px für den Abstand. Viele Designsysteme drücken Rand und Polsterung in rem aus, so dass Abstandsmaßstäbe mit Typ Andere halten Abstände in px für pixelgenaue Layouts Beides ist vertretbar; wählen Sie eins und seien Sie konsistent.
Verwenden Sie em für Dinge, die mit ihrem eigenen Element skaliert werden sollten. Das Auffüllen einer Schaltfläche, die mit der Schaltfläche wachsen soll's Schriftgröße ist eine klassische em-Nutzung - setzen Sie das Auffüllen in em und es verfolgt den Text automatisch Symbolgröße relativ zu nebenstehendem Text ist eine andere.
Verwenden Sie px für Ränder und feine Details. ein 1px Grenze in der Regel bleiben sollte 1px; Sie möchten selten, dass ein Haaransatz mit der Schriftgröße skaliert wird. Medienabfragepunkte werden auch oft in px geschrieben, obwohl einige dort em für das Zoomverhalten bevorzugen.
Verwenden Sie pt nur in Druckstylesheets. Wenn Sie etwas für stylen @media print, Punkte sind die native Einheit von Druck und wert zu verwenden Auf dem Bildschirm, bevorzugen px oder rem.
Verwenden Sie % für Flüssigkeitsbreiten und gelegentlich Schriftgrößen. Prozentsatz ist überall im Layout (width: 50%), und als Schriftgröße wird es manchmal an der Wurzel für den 62,5%-Trick verwendet.
Was sind die häufigen Fehler bei CSS-Einheiten?
Das erste ist das bereits beschriebene Base-Mismatch-Problem: Konvertieren gegen die falsche StammschriftgrößeKennen Sie immer Ihren Stamm, bevor Sie einer Rem-Nummer vertrauen.
Die zweite sind überpräzise rem-Werte Einige Konvertierungen teilen sich nicht gleichmäßig - 15 px an einer 16 px-Basis ist 0,9375 rem, und 13 px ist 0,8125 rem. Diese langen Dezimalstellen sind exakt, aber hässlich, und sie zu hart zu runden (sagen wir auf 0,94 rem) verschiebt die gerenderte Größe um einen Bruchteil eines Pixels Meine Regel: Behalten Sie drei oder vier Dezimalstellen für rem, oder wählen Sie Basis - und Größenwerte, die sauber teilen Der Konverter rundet vernünftig und schneidet nachgestellte Nullen so 24px Liest als 1.5rem anstatt 1.5000remdrohen
Die dritte ist counding em. Nesting-Elemente, die jeweils eine em-Schriftgröße festlegen, vervielfachen den Effekt, so dass ein tief verschachteltes Element am Ende weitaus größer oder kleiner als beabsichtigt werden kann Wenn Sie em überraschend finden, ist diese counding fast immer der Grund - wechseln Sie diese in rem und die Überraschung verschwindet.
Die vierte geht davon aus, dass pt und px austauschbar sind. Sie sind es nicht; 12pt ist 16px, nicht 12px. Sie in einem Stylesheet zu mischen, das Bildschirm und Druck überspannt, ist ein subtiler Fehler.
Wie geht der Toolz.dev-Konverter mit der Mathematik um?
Unter der Haube verwendet der Konverter eine Idee: jede Einheit als eine Anzahl von Pixeln ausdrücken, dann durch Pixel konvertieren Jede Einheit hat ein festes & quot; Pixel pro Einheit" bei gegebener Basisschriftgröße - px ist 1, rem und em sind die Basis, pt ist 96/72, und % ist base/100. Um zu konvertieren, multipliziert es die Eingabe mit seiner Einheit's Pixel pro Einheit, um einen Pixelwert zu erhalten, dann dividiert es durch die Zieleinheit's Pixel pro Einheit. Dieser einzelne Durchgang gibt jede Einheit auf einmal an, weshalb Sie px, rem, em, pt, pt und % aktualisieren, wie Sie es geben.
Es analysiert auch Werte mit angehängten Einheiten, also Einfügen 24px Füllt sowohl die Zahl als auch die Einheit für Sie aus Ergebnisse werden auf einige Dezimalstellen gerundet und zur Lesbarkeit von nachgestellten Nullen befreit, und jedes hat einen Ein-Klick-Kopierknopf, der den Wert mit seinem Einheiten-Suffix kopiert, das bereit ist, in CSS einzufügen Alles läuft Client-seitig - nichts, was Sie eingeben, wird hochgeladen - was mit dem übereinstimmt Privacy-first-ansatz Hinter jedem Tool auf der Seite.
Wenn Sie auch Farben auswählen oder Schatten für dieselbe Komponente bauen, ist die CSS-Gradientengenerator und Box Shadow Generator Einen Klick entfernt wohnen, und die breitere Einheitswandler Behandelt physische Einheiten wie Länge und Gewicht, wenn Ihre Arbeit außerhalb von CSS vergeht.
Häufig gestellte Fragen
Wie konvertiere ich px in REM?
Teilen Sie den Pixelwert durch die Wurzelschriftgröße. Bei Browser-Standard von 16px ist REM = px ÷ 16, also 16px ist 1REM, 24px ist 1.5REM und 8px 0.5Rem. Geben Sie den Pixelwert im Konverter ein und das REM-Äquivalent wird sofort bei der von Ihnen festgelegten Grundschriftgröße angezeigt.
Wie konvertiere ich REM in PX?
Multiplizieren Sie den REM-Wert mit der Wurzelschriftgröße. Bei einer Basis von 16px ist px = REM × 16, also 1REM 16px, 1.5REM 24px und 0.75rem 12px. Ändern Sie die Basisschriftgröße im Tool, wenn Ihr HTML-Element einen anderen Wert verwendet.
Was ist die Standard-Root-Schriftgröße?
Browser setzen das html-Element standardmäßig auf 16 px, weshalb dieser Konverter bei 16 startet, da 1rem immer gleich der Stammschriftgröße ist, ergibt diese Voreinstellung 16 px gleich genau 1 rem. Benutzer können ihren Browser ändern' s Standardtextgröße, was ein Grund dafür ist, dass rem für zugängliche, skalierbare Typografie bevorzugt wird.
Was ist der Unterschied zwischen REM und EM?
Ein rem ist immer relativ zur root html Schriftgröße, bleibt also über die ganze Seite konsistent, ein em ist relativ zur Schriftgröße des aktuellen Elements, so kann es zusammensetzen, wenn verschachtelte Elemente jeweils ihre eigene Größe festlegen Legen Sie die Basisschriftgröße im Tool fest, um einen bestimmten em-Kontext zu modellieren.
Wie hängen PX und PT in CSS zusammen?
CSS definiert ein Pixel 96 Punkte, 1 pt entspricht 72 Punkten, also 96/72 Zoll 9,333 Zoll 1,333 Zoll 1,75 pp. Punkte stammen aus der Drucktypografie; auf dem Bildschirm sind sie ein festes Vielfaches des CSS-Referenzpixels. Verwenden Sie px oder rem für Bildschirmarbeit und reservieren Sie pt für Druckstilblätter.
Was bringt der Trick mit 62,5% Schriftgröße?
Wenn Sie die html-Schriftgröße auf 62,5% einstellen, wird die Stammschriftgröße 10 px, sodass 1 rem zu einem praktischen 10 px wird und rem math in das Verschieben der Dezimalzahl übergeht - 1,6 rem ist 16 px, 2,4 rem ist 24 px. Um dies im Konverter zu modellieren, setzen Sie die Basisschriftgröße auf 10 und lesen Sie die rem-Spalte.
Sollte ich PX oder REM für Schriftgrößen verwenden?
Rem wird im Allgemeinen für Schriftgrößen bevorzugt, da es mit der Benutzer-'s-Browser-Schriftgrößenpräferenz skaliert, was die Zugänglichkeit verbessert, während dies bei festem px nicht der Fall ist. Viele Teams entwerfen in px und konvertieren für das endgültige CSS in rem. Layoutdetails wie Ränder bleiben oft in px.
Warum hat der umgewandelte Wert manchmal lange Dezimalstellen?
Einige Umrechnungen sind nicht exakt - 15 px an einer 16 px-Basis ist 0,9375 rem, und pt-Werte erzeugen oft sich wiederholende Dezimalstellen Das Werkzeug rundet auf einige Dezimalstellen und schneidet nachgestellte Nullen für die Lesbarkeit ab Für pixelgenaue Layouts runde Rem-Werte auf zwei oder drei Dezimalstellen oder wähle eine Basis, die deine Größen sauber teilt.
