Ich möchte die Antwort von josh3736 für die Bereitstellung eines hervorragenden historischen Kontextes loben . Obwohl es gut artikuliert ist, hat sich die CSS-Landschaft in den fast fünf Jahren seit dieser Frage geändert. Als diese Frage gestellt wurde, px war die richtige Antwort, aber das gilt heute nicht mehr.
tl; dr: verwendenrem
Geräteübersicht
Historisch gesehen pxrepräsentierten Einheiten typischerweise ein Gerätepixel. Bei Geräten mit immer höherer Pixeldichte gilt dies nicht mehr für viele Geräte, z. B. beim Apple Retina Display.
remEinheiten stellen die r oot em Größe. Es ist das, font-sizewas auch immer passt :root. Im Fall von HTML ist es das <html>Element; Für SVG ist es das <svg>Element. Die Standardeinstellung font-sizein jedem Browser * ist 16px.
Zum Zeitpunkt des Schreibens remwird von ca. 98% der Benutzer unterstützt . Wenn Sie sich über diese anderen 2% Sorgen machen, möchte ich Sie daran erinnern, dass Medienabfragen auch von ungefähr 98% der Benutzer unterstützt werden .
Bei Verwendung px
Die meisten CSS-Beispiele im Internet verwenden pxWerte, da sie de facto der Standard waren. pt, inUnd eine Vielzahl von anderen Einheiten könnte wurde in der Theorie verwendet, aber sie haben nicht kleine Werte gut behandeln , wie Sie schnell Fraktionen zu greifen brauchen würden, die länger Typen waren, und schwerer zu Grunde über.
Wenn Sie einen dünnen Rand wünschen, den pxSie verwenden können 1px, müssen ptSie ihn 0.75ptfür konsistente Ergebnisse verwenden, und das ist einfach nicht sehr praktisch.
Bei Verwendung rem
remDer Standardwert von 16pxist kein sehr starkes Argument für seine Verwendung. Schreiben 0.0625remist schlimmer als Schreiben 0.75pt. Warum sollte jemand etwas verwenden rem?
Es gibt zwei Teile, remdie gegenüber anderen Einheiten von Vorteil sind.
- Benutzereinstellungen werden respektiert
- Sie können den scheinbaren
pxWert von remnach Belieben ändern
Benutzereinstellungen respektieren
Der Browser-Zoom hat sich im Laufe der Jahre stark verändert. Historisch gesehen wurden viele Browser nur font-sizevergrößert, aber das änderte sich ziemlich schnell, als Websites erkannten, dass ihre wunderschönen pixelgenauen Designs jedes Mal kaputt gingen, wenn jemand hinein- oder herauszoomte. Zu diesem Zeitpunkt skalieren Browser die gesamte Seite, sodass das Zoomen auf Schriftart nicht mehr im Bild angezeigt wird.
Das Respektieren der Wünsche eines Benutzers ist nicht ausgeschlossen. Nur weil ein Browser 16pxstandardmäßig eingestellt ist, bedeutet dies nicht, dass ein Benutzer seine Einstellungen nicht ändern 24pxoder 32pxkorrigieren kann, um Sehbehinderung oder schlechte Sichtbarkeit (ohne Blendung auf dem Bildschirm) zu korrigieren. Wenn Sie Ihre Einheiten auf Basis von verwenden rem, wird jedem Benutzer mit einer höheren Schriftgröße eine proportional größere Site angezeigt. Die Ränder werden größer, die Polsterung wird größer, die Ränder werden größer, alles wird flüssig skaliert.
Wenn Sie Ihre Medienabfragen darauf basieren rem, können Sie auch sicherstellen, dass die Site, die Ihre Benutzer sehen, zu ihrem Bildschirm passt. Ein Benutzer font-size, der in 32pxeinem 640pxbreiten Browser auf eingestellt ist, sieht Ihre Site effektiv so, wie sie einem Benutzer in 16pxeinem 320pxbreiten Browser angezeigt wird. Es gibt absolut keinen Verlust für RWD bei der Verwendung rem.
Scheinbaren pxWert ändern
Da remauf der Basis font-sizedes :rootKnotens, wenn Sie ändern möchten , was 1rembedeutet, alles , was Sie tun müssen, ist die Änderung font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Was auch immer Sie tun, setzen Sie die :rootElemente nicht font-sizeauf einen pxWert.
Wenn Sie das Set font-sizeauf htmlauf einen pxWert, haben Sie die Einstellungen des Benutzers ohne eine Möglichkeit weggeblasen , um sie zurück zu bekommen.
Wenn Sie den scheinbaren Wert von ändern möchten rem, verwenden Sie %Einheiten.
Die Mathematik dafür ist ziemlich einfach.
Die scheinbare Schriftgröße von :rootist 16px, aber nehmen wir an, wir möchten sie ändern 20px. Alles was wir tun müssen, ist 16mit einem Wert zu multiplizieren, um zu erhalten 20.
Stellen Sie Ihre Gleichung auf:
16 * X = 20
Und lösen für X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Alles in Vielfachen zu tun 20ist nicht so toll, aber ein häufiger Vorschlag ist, die scheinbare Größe remgleich zu machen 10px. Die magische Zahl dafür 10/16ist 0.625, oder 62.5%.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Das Problem ist jetzt, dass Ihre Standardeinstellung font-sizefür den Rest der Seite viel zu klein eingestellt ist, aber es gibt eine einfache Lösung dafür: Setzen Sie ein font-sizeauf bodymit rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Es ist wichtig zu beachten, dass bei dieser Anpassung der scheinbare Wert von remist, 10pxwas bedeutet, dass jeder Wert, den Sie möglicherweise geschrieben haben, pxdirekt remdurch Anstoßen einer Dezimalstelle konvertiert werden kann .
padding: 20px;
verwandelt sich in
padding: 2rem;
Die scheinbare Schriftgröße, die Sie wählen, liegt bei Ihnen. Wenn Sie also möchten, gibt es keinen Grund, den Sie nicht verwenden können:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
und haben 1remgleich 1px.
Da haben Sie es also, eine einfache Lösung, um Benutzerwünsche zu respektieren und gleichzeitig zu vermeiden, dass Ihr CSS zu kompliziert wird.
Warten Sie, was ist der Haken?
Ich hatte Angst, Sie könnten das fragen. So sehr ich vorgeben möchte, dass dies remMagie ist und alles löst, gibt es immer noch einige wichtige Punkte. Meiner Meinung nach ist das kein Deal-Breaking , aber ich werde sie anrufen, damit Sie nicht sagen können, dass ich Sie nicht gewarnt habe.
Medienabfragen (Verwendung em)
Eines der ersten Probleme, mit denen Sie konfrontiert werden, sind remMedienabfragen. Betrachten Sie den folgenden Code:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Hier remhängt der Wert von Änderungen davon ab, ob die Medienabfrage angewendet wird, und die Medienabfrage hängt vom Wert von ab rem. Was um alles in der Welt ist also los?
remBei Medienabfragen wird der Anfangswert von verwendet font-sizeund sollte (siehe Abschnitt Safari) keine Änderungen berücksichtigen, die möglicherweise font-sizeam :rootElement vorgenommen wurden. Mit anderen Worten, der scheinbare Wert ist immer 16px .
Dies ist etwas ärgerlich, da es bedeutet, dass Sie einige Teilberechnungen durchführen müssen, aber ich habe festgestellt, dass die meisten gängigen Medienabfragen bereits Werte verwenden, die ein Vielfaches von 16 sind.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
Wenn Sie einen CSS-Präprozessor verwenden, können Sie außerdem Mixins oder Variablen verwenden, um Ihre Medienabfragen zu verwalten, wodurch das Problem vollständig maskiert wird.
Safari
Leider ist ein Fehler in Safari bekannt, bei dem Änderungen an der :rootSchriftgröße tatsächlich die berechneten remWerte für Medienabfragebereiche ändern . Dies kann zu einem sehr merkwürdigen Verhalten führen, wenn die Schriftgröße des :rootElements innerhalb einer Medienabfrage geändert wird. Glücklicherweise ist das Update einfach: Verwenden Sie emEinheiten für Medienabfragen .
Kontextwechsel
Wenn Sie zwischen verschiedenen Projekten wechseln, ist es durchaus möglich, dass die scheinbare Schriftgröße von remunterschiedliche Werte hat. In einem Projekt verwenden Sie möglicherweise eine scheinbare Größe, in der 10pxin einem anderen Projekt die scheinbare Größe liegt 1px. Dies kann verwirrend sein und Probleme verursachen.
Meine einzige Empfehlung hier ist 62.5%, rembei einer scheinbaren Größe von zu bleiben 10px, da dies meiner Erfahrung nach häufiger vorkommt.
Gemeinsame CSS-Bibliotheken
Wenn Sie CSS schreiben, das auf einer Site verwendet wird, die Sie nicht steuern, z. B. für ein eingebettetes Widget, gibt es keine gute Möglichkeit, die scheinbare Größe zu ermitteln rem. Wenn dies der Fall ist, können Sie es weiterhin verwenden px.
Wenn Sie dennoch verwenden möchten, sollten Sie remeine Sass- oder WENIGER-Version des Stylesheets mit einer Variablen freigeben, um die Skalierung für die scheinbare Größe von zu überschreiben rem.
* Ich möchte niemanden davon abhalten, etwas zu verwenden rem, aber ich konnte nicht offiziell bestätigen, dass jeder Browser 16pxstandardmäßig verwendet. Sie sehen, es gibt viele Browser, und es wäre nicht allzu schwer für einen Browser, so leicht davon abzuweichen, sagen wir 15pxoder 18px. Beim Testen habe ich jedoch kein einziges Beispiel gesehen, bei dem ein Browser, der Standardeinstellungen in einem System mit Standardeinstellungen verwendet, einen anderen Wert als hatte 16px. Wenn Sie ein solches Beispiel finden, teilen Sie es mir bitte mit.
