Ich möchte Folgendes loben <a href="https://stackoverflow.com/a/11803273/497418">josh3736's Antwort </a>für die Bereitstellung eines hervorragenden historischen Kontextes. Auch wenn die Frage gut formuliert ist, hat sich die CSS-Landschaft in den fast fünf Jahren, seit sie gestellt wurde, verändert. Als diese Frage gestellt wurde, <code>px</code> <em>war </em>die richtige Antwort, aber das ist heute nicht mehr der Fall.
tl;dr: utilice rem
Überblick über die Einheit
Historisch px Einheiten entsprachen in der Regel einem Gerätepixel. Mit Geräten, die eine immer höhere Pixeldichte aufweisen, gilt dies für viele Geräte nicht mehr, wie z. B. für das Retina-Display von Apple.
rem Einheiten stellen die r oot em Größe. Es ist die font-size von was auch immer passt :root . Im Fall von HTML ist es die <html> Element; für SVG ist es das <svg> Element. Der Standard font-size in jedem Browser* ist 16px .
Zur Verwendung px
Die Mehrzahl der CSS-Beispiele im Internet verwendet px Werte, weil sie der De-facto-Standard waren. pt , in und eine Vielzahl anderer Einheiten podría wurden in der Theorie verwendet, aber sie konnten mit kleinen Werten nicht gut umgehen, da man schnell auf Brüche zurückgreifen musste, die länger zu tippen und schwieriger zu erklären waren.
Wenn Sie einen dünnen Rand wünschen, mit px könnten Sie verwenden 1px , mit pt müssten Sie Folgendes verwenden 0.75pt für konsistente Ergebnisse, und das ist einfach nicht sehr praktisch.
Zur Verwendung rem
rem der Standardwert von 16px ist kein sehr starkes Argument für seine Verwendung. Schreiben 0.0625rem es schlechter als das Schreiben 0.75pt warum also sollte jemand die rem ?
Das Projekt besteht aus zwei Teilen rem den Vorteil gegenüber anderen Einheiten.
- Benutzerpräferenzen werden respektiert
- Sie können die scheinbare
px Wert von rem auf was immer Sie möchten
Benutzerpräferenzen respektieren
Der Browser-Zoom hat sich im Laufe der Jahre stark verändert. In der Vergangenheit konnten viele Browser nur vergrößern font-size Das änderte sich jedoch ziemlich schnell, als Websites feststellten, dass ihr schönes, pixelgenaues Design bei jeder Vergrößerung oder Verkleinerung zerbrach. Heute skalieren die Browser die gesamte Seite, so dass ein schriftsatzbasiertes Zoomen nicht mehr möglich ist.
Die Wünsche der Nutzer zu respektieren, ist nicht unmöglich. Nur weil ein Browser so eingestellt ist 16px standardmäßig eingestellt ist, bedeutet das nicht, dass ein Benutzer seine Einstellungen nicht ändern kann, um 24px o 32px zur Korrektur von Sehschwächen oder schlechter Sicht (z. B. Blendung durch den Bildschirm). Wenn Sie Ihre Einheiten auf der Grundlage von rem Bei einer höheren Schriftgröße sieht der Benutzer eine proportional größere Seite. Die Ränder werden größer sein, die Polsterung wird größer sein, die Ränder werden größer sein, alles wird fließend skaliert werden.
Wenn Sie Ihre Medienabfragen auf der Grundlage von rem Sie können auch dafür sorgen, dass die Website, die Ihre Nutzer sehen, auf ihren Bildschirm passt. Ein Benutzer mit font-size eingestellt auf 32px in einem 640px breiten Browser, wird Ihre Website tatsächlich so gesehen, wie sie einem Nutzer auf 16px in einem 320px breiten Browser. Die Verwendung von responsive web design (RWD) ist absolut kein Verlust für rem .
Scheinbar ändern px Wert
Denn rem basiert auf dem font-size der :root Knoten, wenn Sie ändern möchten, was 1rem darstellt, müssen Sie lediglich die font-size :
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Was auch immer Sie tun, stellen Sie nicht die :root Element font-size a un px Wert.
Wenn Sie die Einstellung font-size auf html a un px Wertes haben Sie die Präferenzen des Benutzers über den Haufen geworfen, ohne eine Möglichkeit, sie zurückzubekommen.
Wenn Sie die scheinbar Wert von rem verwenden % Einheiten.
Die Berechnungen hierfür sind relativ einfach.
Die offensichtliche Schriftgröße von :root es 16px aber sagen wir mal, wir wollen es ändern in 20px . Alles, was wir tun müssen, ist multiplizieren 16 durch einen Wert, um Folgendes zu erhalten 20 .
Stellen Sie Ihre Gleichung auf:
16 * X = 20
Und lösen Sie 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 von 20 ist nicht besonders groß, aber ein gängiger Vorschlag ist, die scheinbare Größe von rem gleich 10px . Die magische Zahl dafür lautet 10/16 das ist 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 nun, dass Ihr Standard font-size für den Rest der Seite viel zu klein eingestellt ist, aber dafür gibt es eine einfache Lösung: Setzen Sie eine font-size auf body mit 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 mit dieser Anpassung der scheinbare Wert von rem es 10px was bedeutet, dass jeder Wert, den Sie in px kann direkt umgewandelt werden in rem durch Verschieben einer Dezimalstelle.
padding: 20px;
wird zu
padding: 2rem;
Die Schriftgröße, die Sie wählen, ist Ihnen überlassen, und wenn Sie wollen, gibt es keinen Grund, sie nicht zu verwenden:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
und haben 1rem gleich 1px .
Das ist eine einfache Lösung, um die Wünsche der Benutzer zu respektieren und gleichzeitig zu vermeiden, dass Ihr CSS zu kompliziert wird.
Moment, wo ist der Haken?
Ich habe befürchtet, dass Sie das fragen würden. So gerne ich auch so tun würde, als ob rem magisch ist und alles löst, gibt es immer noch einige Probleme, die zu beachten sind. Nichts Weltbewegendes meiner Meinung nach aber ich werde sie ansprechen, damit Sie nicht sagen können, ich hätte Sie nicht gewarnt.
Medienabfragen (verwenden Sie em )
Eines der ersten Probleme, auf das Sie stoßen werden, ist rem beinhaltet Medienabfragen. Betrachten Sie den folgenden Code:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Hier wird der Wert von rem ändert sich je nachdem, ob die Medienabfrage zutrifft, und die Medienabfrage hängt von dem Wert von rem Was um alles in der Welt ist hier los?
rem in Medienabfragen verwendet den Anfangswert von font-size y sollte nicht (siehe Abschnitt Safari) berücksichtigen alle Änderungen, die an der font-size der :root Element. Mit anderen Worten, sein offensichtlicher Wert ist immer 16px .
Das ist ein bisschen ärgerlich, denn es bedeutet, dass Sie Folgendes tun müssen einige Bruchrechnungen, 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 Media-Queries zu verwalten, was das Problem vollständig überdecken wird.
Safari
Leider gibt es einen bekannten Fehler in Safari, bei dem Änderungen an der :root Schriftgröße ändern tatsächlich die berechnete rem Werte für Medienabfragebereiche. Dies kann ein sehr seltsames Verhalten verursachen, wenn die Schriftgröße der :root Element innerhalb einer Medienabfrage geändert wird. Glücklicherweise ist die Lösung einfach: utilice em Einheiten für Medienabfragen .
Kontext-Umschaltung
Wenn Sie zwischen verschiedenen Projekten hin- und herwechseln, ist es durchaus möglich, dass die scheinbare Schriftgröße von rem werden unterschiedliche Werte haben. In einem Projekt könnten Sie eine scheinbare Größe von 10px wo bei einem anderen Projekt die scheinbare Größe sein könnte 1px . Dies kann verwirrend sein und Probleme verursachen.
Ich kann hier nur empfehlen, sich an 62.5% zu konvertieren rem auf eine scheinbare Größe von 10px weil dies meiner Erfahrung nach häufiger vorkommt.
Gemeinsame CSS-Bibliotheken
Wenn Sie CSS schreiben, das auf einer Website verwendet werden soll, die Sie nicht kontrollieren, z. B. für ein eingebettetes Widget, gibt es keine gute Möglichkeit zu wissen, welche scheinbare Größe rem haben wird. Wenn das der Fall ist, können Sie weiterhin die px .
Wenn Sie weiterhin die rem Sie sollten jedoch in Erwägung ziehen, eine Sass- oder LESS-Version des Stylesheets mit einer Variable zu veröffentlichen, die die Skalierung für die scheinbare Größe von rem .
* Ich möchte niemanden davon abhalten, die <code>rem</code> aber ich konnte das noch nicht offiziell bestätigen. <em>jede </em>Browser verwendet <code>16px</code> standardmäßig. Es gibt viele Browser, und es wäre nicht allzu schwer, wenn ein Browser ein wenig von der Standardeinstellung abweicht, zum Beispiel <code>15px</code> o <code>18px</code> . Bei meinen Tests habe ich jedoch kein einziges Beispiel gesehen, bei dem ein Browser mit Standardeinstellungen in einem System mit Standardeinstellungen einen anderen Wert als <code>16px</code> . Wenn Sie ein solches Beispiel finden, teilen Sie es mir bitte mit.
