Soll ich in meinem CSS px- oder rem-Werteinheiten verwenden? [geschlossen]

375

Ich entwerfe eine neue Website und möchte, dass sie mit möglichst vielen Browsern und Browsereinstellungen kompatibel ist. Ich versuche zu entscheiden, welche Maßeinheit ich für die Größe meiner Schriftarten und Elemente verwenden soll, kann jedoch keine endgültige Antwort finden.

Meine Frage ist: Soll ich pxoder remin meinem CSS verwenden?

  • Bisher weiß ich, dass die Verwendung pxnicht mit Benutzern kompatibel ist, die ihre Basisschriftgröße in ihrem Browser anpassen.
  • Ich habe ems ignoriert, weil es im Vergleich zu rems schwieriger ist, sie zu warten , da sie kaskadieren.
  • Einige sagen, dass rems auflösungsunabhängig und daher wünschenswerter sind. Andere sagen jedoch, dass die meisten modernen Browser ohnehin alle Elemente gleich zoomen, sodass die Verwendung pxkein Problem darstellt.

Ich frage dies, weil es viele unterschiedliche Meinungen darüber gibt, was das wünschenswerteste Maß für die Entfernung in CSS ist, und ich bin mir nicht sicher, welches das beste ist.

html css distance units-of-measurement TylerH
quelle
4
Dies ist eine Frage von Streit, Argumentation und Meinung, nicht die Art von technischen Fragen, in denen SO gut ist. Die richtige Antwort lautet übrigens "Nein". ☺
Jukka K. Korpela
2
Auch der Kommentar ist veraltet. Nur weil das OP nach der richtigen Meinung fragt, heißt das nicht, dass wir nur unsere eigene Meinung abgeben werden. Fast 8 Jahre später zeigt diese Frage, dass es immer noch ein Interesse daran gibt, wie sich das Thema entwickelt. Aktuelle Antworten sind begründet und technisch genug und NICHT mit einer Meinung versehen. Daher schlage ich vor, das Wort "Meinung" in "Erfahrung" zu ändern, damit wir nicht in die Falle geraten, die Frage immer wieder zu öffnen und zu schließen.
Tim Vermaelen
2
@ TimVermaelen Diese Frage wurde nur einmal in ihrem Leben geschlossen. Die vorgenommene Änderung war nicht inhaltlich, da die Antwort immer noch vollständig vom Kontext abhängt, der möglicherweise nicht bereitgestellt werden kann, es sei denn, OP bearbeitet die Frage, um nach einem bestimmten Szenario zu fragen. Es gibt keine "beste" Option für alle Fälle, daher ist diese Frage meinungsbasiert.
TylerH

Antworten:

418

TL; DR: verwenden px.

Die Fakten

  • Erstens ist es äußerst wichtig zu wissen, dass die CSS- Einheit pro Spezifikation nicht einem physischen Anzeigepixel entspricht. Dies war schon immer so - auch in der CSS 1-Spezifikation von 1996 .px

    CSS definiert das Referenzpixel , das die Größe eines Pixels auf einem 96-dpi-Display misst. Auf einem Display mit einer wesentlich anderen dpi als 96 dpi (wie bei Retina-Displays) skaliert der Benutzeragent das pxGerät neu, sodass seine Größe mit der eines Referenzpixels übereinstimmt. Mit anderen Worten, diese Neuskalierung ist genau der Grund, warum 1 CSS-Pixel 2 physischen Retina-Anzeigepixeln entspricht.

    Bis 2010 (und ungeachtet der Situation mit dem mobilen Zoom) entsprach das pxfast immer einem physischen Pixel, da alle weit verbreiteten Displays etwa 96 dpi hatten.

  • Die in ems angegebenen Größen beziehen sich auf das übergeordnete Element . Dies führt zu dem em"Compounding-Problem", bei dem verschachtelte Elemente zunehmend größer oder kleiner werden. Zum Beispiel:

    body { font-size:20px; } 
div { font-size:0.5em; }

    Gibt uns:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • Das CSS3 rem, das immer nur relativ zum Stammelement htmlist, wird jetzt von 96% aller verwendeten Browser unterstützt .

Die Meinung

Ich denke, alle sind sich einig, dass es gut ist, Ihre Seiten so zu gestalten, dass sie allen gerecht werden und Sehbehinderte berücksichtigen. Eine solche Überlegung (aber nicht die einzige!) Ist, dass Benutzer den Text Ihrer Website vergrößern können, damit er leichter zu lesen ist.

Am Anfang war die einzige Möglichkeit, Benutzern eine Möglichkeit zum Skalieren der Textgröße zu bieten, die Verwendung relativer Größeneinheiten (z. B. ems). Dies liegt daran, dass das Schriftgrößenmenü des Browsers einfach die Root-Schriftgröße geändert hat. Wenn Sie also Schriftgrößen in angeben px, werden diese beim Ändern der Schriftgrößenoption des Browsers nicht skaliert.

Moderne Browser (und sogar der nicht ganz so moderne IE7) haben die Standardskalierungsmethode dahingehend geändert, dass sie einfach alles vergrößern, einschließlich Bilder und Boxgrößen. Im Wesentlichen machen sie das Referenzpixel größer oder kleiner.

Ja, jemand könnte noch ihren Browser Standard - Stylesheet ändert die Standardschriftgröße (entspricht die alten Stil Schriftgröße Option) zu optimieren, aber das ist ein sehr esoterischer Weg zu gehen darüber und ich würde wetten , niemand 1 tut es. (In Chrome ist es unter den erweiterten Einstellungen, Webinhalten und Schriftgrößen vergraben. In IE9 ist es noch versteckter. Sie müssen Alt drücken und zu Ansicht, Textgröße wechseln.) Es ist viel einfacher, einfach die Option Vergrößern auszuwählen das Hauptmenü des Browsers (oder verwenden Sie das Ctrl+ +/ -/ Mausrad).

1 - natürlich innerhalb eines statistischen Fehlers

Wenn wir davon ausgehen, dass die meisten Benutzer Seiten mit der Zoomoption skalieren, finde ich relative Einheiten meistens irrelevant. Es ist viel einfacher, Ihre Seite zu entwickeln, wenn alles in derselben Einheit angegeben ist (Bilder werden alle in Pixel behandelt), und Sie müssen sich keine Gedanken über das Zusammensetzen machen. ( "Mir wurde gesagt, dass es keine Mathematik geben würde" - es geht darum, berechnen zu müssen, was 1.5em tatsächlich bewirkt.)

Ein weiteres potenzielles Problem bei der Verwendung nur relativer Einheiten für Schriftgrößen besteht darin, dass benutzerdefinierte Schriftarten möglicherweise die Annahmen Ihres Layouts verletzen. Dies kann beispielsweise dazu führen, dass Text abgeschnitten wird oder zu lange läuft. Wenn Sie absolute Einheiten verwenden, müssen Sie sich keine Sorgen machen, dass unerwartete Schriftgrößen Ihr Layout beschädigen.

Meine Antwort lautet also Pixeleinheiten verwenden. Ich benutze pxfür alles. Natürlich kann Ihre Situation variieren, und wenn Sie IE6 unterstützen müssen (mögen die Götter der RFCs sich Ihrer erbarmen), müssen Sie emtrotzdem s verwenden.

josh3736
quelle
43
Sie sollten Pixel und Rem verwenden. So erhalten neuere Browser Rem und alte Browser greifen auf Pixel zurück (wie es WordPress 2012 tut). Dies kann mit Sass oder Less automatisiert werden. Geben Sie also nur den px-Wert ein und es werden automatisch px und rem ausgegeben.
Cchiera
63
Mein großes Problem mit diesem Argument ist, dass Sie beim Anpassen der Schriftgröße und des Abstands an reaktionsschnellen Haltepunkten eine neue Schriftgröße für das HTML-Element festlegen können und jede Messung, die Sie in rem festgelegt haben, automatisch angepasst wird, während Sie mit px schreiben müssen Neue Regeln für jede Messung, die Sie optimieren möchten. Natürlich werden wahrscheinlich auch bei Verwendung von rem weitere Anpassungen erforderlich sein, aber mit einer cleveren Planung erhalten Sie eine große Menge an proportionaler Skalierung kostenlos. Das Verknüpfen bestimmter Box-Abstandsmessungen mit Typ, leichterem Code und weniger Komplexität / mehr Wartbarkeit bedeutet für mich einen klaren Gewinn für Rem.
RobW
16
Angenommen, kein Benutzer ändert die Schriftgrößeneinstellung ist ziemlich fett. Ein solcher Anspruch sollte mit Daten belegt werden. Ansonsten ist es nur eine Möglichkeit, einige der Benutzer zu entfremden, die bereits zerbrechlich sind (stark sehbehinderte Personen). Wenn Sie können, verwenden Sie rem anstelle von px. IMO sollten Apps in der Lage sein, ihre Benutzeroberfläche und die Schriftgröße unabhängig voneinander zu skalieren. "Just use px" ist das, was viele Entwickler, die mit dem EM-Problem zu kämpfen haben, hören möchten, aber es ist nicht die richtige Antwort für das Web.
Olivvv
18
Wäre toll, wenn ich ein Follow-up dazu hätte. Rem ist jetzt bei 95% + Unterstützung.
Lernstatistiken am Beispiel
10
Falsch, ich interessiere mich nicht für IE (niemand sollte).
Vahid Amiri
194

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>
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

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.

zzzzBov
quelle
Ich weiß, dass dies spät ist, aber ich mag die Art und Weise, wie REM verwendet wird, aber ich habe das größte Problem bei der Verwendung von rem, wenn ich matrix()mit Javascript verwende, bei dem Matrix-Übersetzungswerte verwendet werden px(korrigieren Sie mich, wenn ich falsch liege), und ich bin so verwirrt damit .
Ampersanda
3
@Ampersanda, in JavaScript werden Sie hauptsächlich berechnete Pixelwerte verwenden. Ich empfehle, die Klassen nach Möglichkeit umzuschalten, damit CSS das Erscheinungsbild verwalten kann. Bei einigen Dingen können Sie es nicht vermeiden, JS zum Berechnen von Pixelwerten zu verwenden. Daher ist es am besten, den Pixelwert aus dem DOM-Status zu berechnen.
zzzzBov
Ich verstehe, also muss ich, getComputedStyle()aber das Ergebnis ist immer auf Pixel, also muss ich das Ergebnis durch den remWert teilen (wie 16). CMIIW
Ampersanda
@Ampersanda nur wenn Sie tatsächlich einen remWert generieren , wenn Sie bereits den richtigen pxWert haben, müssen Sie nicht zu remEinheiten für Dinge wechseln , die bereits für den angegebenen Kontext berechnet wurden.
zzzzBov
1
1rem gleich 1px haben Dies verursacht Probleme aufgrund der minimalen Schriftgröße von Chrome: stackoverflow.com/questions/44378664/… stackoverflow.com/questions/24200797/…
Paul
44

Dieser Artikel beschreibt ziemlich gut die Vor- und Nachteile von px, em, und rem.

Der Autor kommt schließlich zu dem Schluss, dass die beste Methode wahrscheinlich darin besteht, beide pxund zu verwenden rem, indem er pxzuerst für ältere Browser deklariert und remfür neuere Browser neu deklariert :

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
uzyn
quelle
1
Ja, das hat mich in erster Linie für den Rem interessiert. Zwei Dinge, die ich nicht verstehe: Er empfiehlt sie nur als Maßeinheit für Schriftarten (nicht für Elemente). Wenn ich ihn richtig verstehe, ist der einzige wirkliche Grund für die Verwendung von (r) em, dass IE-Benutzer die Größe des Texts ändern können.
1
@ Samuel Ich glaube schon. Ich glaube, wir würden es vorziehen, wenn Sie die Größe des Textes nicht ändern würden px. Bei der Einheit für Elemente ist pxes besser, sich daran zu halten, da Sie normalerweise die Größe von Elementen präzise festlegen möchten.
Uzyn
Aber wenn Sie das tun, würde jede Browsereinstellung, die die Grundschriftgröße neu definiert, Ihr Layout durcheinander bringen, oder? Warum nicht für alles rem?
1
Wie viele Kommentare hier bemerken , war der Grund, warum wir pxdie Größe ändern mussten, die Aktivierung der Größenänderung. Wenn wir jetzt verwenden rem, müssen wir immer noch pxFallback bereitstellen (in älteren Browsern). Im Wesentlichen bedeutet dies, dass die pxGrößenänderung des Supports besser ist als rem. Neuere Browser unterstützen die pxGrößenänderung und für ältere Browser jede Art und Weise, auf die wir zurückgreifen werden px. Angesichts dieser Schlussfolgerung bin ich sehr daran interessiert zu wissen, warum ich sie verwende rem. Wenn ich das Licht am Ende des Tunnels sehen darf.
Fusionstrings
3
Es gibt keine Garantie dafür, dass Werte wie 62,5% = 10px sind. Dies gilt nur, wenn die Standardschriftgröße des Browsers auf 16px eingestellt wurde. Dies ist zwar die Standardeinstellung, kann jedoch nicht garantiert werden.
Cimmanon
7

Als Reflexantwort würde ich die Verwendung von rem empfehlen, da Sie bei Bedarf die "Zoomstufe" des gesamten Dokuments auf einmal ändern können. In einigen Fällen, wenn Sie möchten, dass die Größe relativ zum übergeordneten Element ist, verwenden Sie em.

Die Rem-Unterstützung ist jedoch unvollständig, IE8 benötigt eine Polyfüllung und Webkit weist einen Fehler auf. Darüber hinaus kann die Subpixelberechnung dazu führen, dass Dinge wie Zeilen mit einem Pixel manchmal verschwinden. Die Abhilfe besteht darin, Pixel für solch sehr kleine Elemente zu codieren. Das führt zu noch mehr Komplexität.

Fragen Sie sich also insgesamt, ob es sich lohnt - wie wichtig und wahrscheinlich ist es, dass Sie die "Zoomstufe" des gesamten Dokuments in CSS ändern?

In einigen Fällen ist es ja, in einigen Fällen ist es nein.

Es hängt also von Ihren Anforderungen ab und Sie müssen die Vor- und Nachteile abwägen, da die Verwendung von rem und em einige zusätzliche Überlegungen im Vergleich zum "normalen" pixelbasierten Workflow mit sich bringt.

Denken Sie daran, dass es einfach ist, Ihr CSS von px auf rem umzustellen (oder besser zu konvertieren) (JavaScript ist eine andere Geschichte), da die folgenden zwei CSS-Codeblöcke das gleiche Ergebnis liefern würden:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}
html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
Rolf
quelle
6

Ja, REM und PX sind relativ, aber andere Antworten haben vorgeschlagen, REM über PX zu wählen. Ich möchte dies auch anhand eines Beispiels für Barrierefreiheit sichern.
Wenn der Benutzer im Browser eine andere Schriftgröße festlegt, skaliert REM Elemente wie Schriftarten, Bilder usw. auf der Webseite automatisch nach oben und unten, was bei PX nicht der Fall ist.

Im folgenden GIF wird der Text auf der linken Seite mit der REM-Einheit für die Schriftgröße festgelegt, während die Schrift auf der rechten Seite mit der PX-Einheit festgelegt wird.

Geben Sie hier die Bildbeschreibung ein

Wie Sie sehen können, wird REM automatisch vergrößert / verkleinert, wenn ich die Standardschriftgröße der Webseite ändere. (Unten rechts)

Die Standardschriftgröße einer Webseite ist 16px, was 1 rem entspricht (nur für die Standard-HTML-Seite, dh html{font-size:100%}), also entspricht 1,25rem 20px.

PS: Wer benutzt noch REM? CSS Frameworks! wie Bootstrap 4, Bulma CSS usw., also besser damit auskommen.

JerryGoyal
quelle
3

Die Antwort von josh3736 ist gut, aber um 3 Jahre später einen Kontrapunkt zu liefern:

Ich empfehle die Verwendung von remEinheiten für Schriftarten, schon allein deshalb, weil es für Sie als Entwickler einfacher ist , die Größe zu ändern. Es ist richtig, dass Benutzer die Standardschriftgröße in ihren Browsern sehr selten ändern und dass der moderne Browser-Zoom pxEinheiten vergrößert . Aber was ist, wenn Ihr Chef zu Ihnen kommt und sagt: "Vergrößern Sie nicht die Bilder oder Symbole, sondern vergrößern Sie alle Schriftarten." Es ist viel einfacher, einfach die Root-Schriftgröße zu ändern und alle anderen Schriftarten relativ dazu skalieren zu lassen, als die pxGröße in Dutzenden oder Hunderten von CSS-Regeln zu ändern .

Ich denke, es ist immer noch sinnvoll, pxEinheiten für einige Bilder oder für bestimmte Layoutelemente zu verwenden, die unabhängig vom Maßstab des Designs immer dieselbe Größe haben sollten.

Caniuse.com hat vielleicht gesagt, dass nur 75% der Browser, als josh3736 seine Antwort im Jahr 2012 veröffentlichte, ab dem 27. März 93,78% Unterstützung beanspruchen . Nur IE8 unterstützt es nicht unter den Browsern, die sie verfolgen.

Joshua Carmody
quelle
1
Only IE8 doesn't support it among the browsers they track.Huh? Auf der verlinkten Seite heißt es: „IE9 und IE10 unterstützen keine Rem-Einheiten, wenn sie in der Shorthand-Eigenschaft für Schriftarten oder für Pseudoelemente verwendet werden. IE9, 10 & 11 unterstützen keine Rem-Einheiten, wenn sie in der Eigenschaft "Zeilenhöhe" verwendet werden, wenn sie für: vor und: nach Pseudoelementen verwendet werden. Rem-Größen verschwinden, wenn die Seite in Chrome verkleinert wird. Funktioniert nicht mit Samsung Note II Android 4.3 Browser und Samsung Galaxy Tab 2 unter Android 4.2. Bei Chrome 31-34 und Chrome-basierten Android-Geräten (wie 4.4) tritt ein Fehler in der Schriftgröße auf, wenn das Root-Element eine prozentuale Größe hat. “
E-Sushi
Auch im Zusammenhang mit Ihrem as of March 27 they claim 93.78% support. Zum Zeitpunkt der diesen Kommentar zu schreiben, caniuse zeigt lediglich 91,79% der vollen Browser - Unterstützung. Wenn Sie sich Ihren Prozentsatz ansehen, bin ich mir ziemlich sicher, dass Sie auch die Unterstützung für fehlerhafte Browser einbezogen haben (derzeit 2,8%, was als optimistische Gesamtabdeckung von 94,6% interpretiert werden könnte - aber Tatsache ist, dass diese 2,8% fehlerhaft, unvollständig oder sogar vollständig sind Fehlerhafte Unterstützung… wie in meinem vorherigen Kommentar erwähnt: Jeder Fehler ist das Ergebnis unterschiedlicher Browserversionen und Betriebssystemkombinationen.) Möglicherweise möchten Sie Ihre Antwort entsprechend korrigieren…
e-sushi
1

Ich habe herausgefunden, dass der beste Weg, die Schriftgrößen einer Website zu programmieren, darin besteht, eine Basisschriftgröße für die zu definieren bodyund dann ems (oder rems) für jede andere zu verwenden, die font-sizeich danach deklariere. Das ist wohl eine persönliche Präferenz, aber sie hat mir gute Dienste geleistet und es auch sehr einfach gemacht, ein reaktionsschnelleres Design zu integrieren .

Was die Verwendung von Rem-Einheiten angeht, finde ich es gut, ein Gleichgewicht zwischen progressivem Code zu finden, aber auch Unterstützung für ältere Browser anzubieten. Schauen Sie sich diesen Link über die Browserunterstützung für Rem-Einheiten an , der Ihnen bei Ihrer Entscheidung helfen sollte.

Cereallarceny
quelle
OK. Aber Responsive Design ist mit px-Einheiten genauso einfach zu machen (schreiben Sie einfach Ihre Medienabfragen basierend auf px anstelle von em)?
Wenn Sie jedoch Ihre Schriftgröße verkleinern möchten, wenn die Breite des Ansichtsfensters Ihrer Website kleiner wird, können Sie die bodySchriftgröße ändern und alles ändert sich damit.
Cereallarceny
Ich mache mir keine Sorgen um die Browserunterstützung. Ich werde nur eine Fallback-px-Größe für alle Größen angeben, damit ältere Browser etwas zu interpretieren haben.
Dann gehen Sie den progressiven Weg, indem Sie Rems verwenden. Solange Sie einen Fallback bereitstellen, sehe ich keinen Schaden. Für mich scheint es nur zusätzliche Arbeit zu sein, aber vielleicht nicht in Ihrer Situation.
Cereallarceny
0

ptist insofern ähnlich rem, als es relativ fest ist, aber fast immer DPI-unabhängig, selbst wenn nicht konforme Browser behandelnpx geräteabhängig . remvariiert mit der Schriftgröße des Stammelements, aber Sie können etwas wie Sass / Compass verwenden, um dies automatisch zu tun pt.

Wenn du das hättest:

html {
    font-size: 12pt;
}

dann 1remwäre es immer 12pt. remund emsind nur so geräteunabhängig wie die Elemente, auf die sie sich verlassen; Einige Browser verhalten sich nicht gemäß den Spezifikationen und werden pxwörtlich behandelt . Selbst in den alten Tagen des Web wurde 1 Punkt durchweg als 1/72 Zoll angesehen - das heißt, es gibt 72 Punkte in einem Zoll.

Wenn Sie einen alten, nicht kompatiblen Browser haben und Folgendes haben:

html {
    font-size: 16px;
}

dann 1remwird geräteabhängig sein. Für Elemente, die htmlstandardmäßig erben würden , 1emwäre dies auch geräteabhängig. 12ptwäre das hoffentlich garantierte geräteunabhängige Äquivalent:16px / 96px * 72pt = 12pt , wo 96px = 72pt = 1in.

Es kann ziemlich kompliziert werden, zu rechnen, wenn Sie sich an bestimmte Einheiten halten möchten. Zum Beispiel .75em of html = .75rem = 9ptund .66em of .75em of html = .5rem = 6pt. Eine gute Faustregel ist:

  • Verwenden Sie ptfür absolute Größen. Wenn dies wirklich dynamisch in Bezug auf das Stammelement sein muss, fordern Sie zu viel CSS. Sie benötigen eine Sprache, die zu CSS kompiliert werden kann, z. B. Sass / SCSS.
  • Verwenden Sie emfür relative Größen. Es ist ziemlich praktisch zu sagen: "Ich möchte, dass der Rand links ungefähr die maximale Breite eines Buchstabens hat" oder "Machen Sie den Text dieses Elements nur ein bisschen größer als seine Umgebung." <h1>ist ein gutes Element für die Verwendung einer Schriftgröße in ems, da sie an verschiedenen Stellen angezeigt werden kann, aber immer größer sein sollte als Text in der Nähe. Auf diese Weise müssen Sie nicht für jede Klasse, auf die angewendet wird, eine separate Schriftgröße festlegenh1 : Die Schriftgröße wird automatisch angepasst.
  • Verwenden Sie pxfür sehr kleine Größen. Bei sehr kleinen Größen ptkann es in einigen Browsern mit 96 DPI unscharf werden, da ptund pxnicht ganz ausgerichtet. Wenn Sie nur einen dünnen Ein-Pixel-Rand erstellen möchten, sagen Sie dies. Wenn Sie ein hochauflösendes Display haben, wird Ihnen dies beim Testen nicht klar sein. Testen Sie daher irgendwann auf einem generischen 96-DPI-Display.
  • Beschäftigen Sie sich nicht mit Subpixeln, um auf hochauflösenden Displays etwas Besonderes zu machen. Einige Browser unterstützen dies möglicherweise - insbesondere bei hochauflösenden Displays -, aber es ist ein Nein-Nein. Die meisten Benutzer bevorzugen groß und klar, obwohl das Web uns Entwicklern etwas anderes beigebracht hat. Wenn Sie Ihren Benutzern mit hochmodernen Bildschirmen erweiterte Details hinzufügen möchten, können Sie Vektorgrafiken (lesen Sie: SVG) verwenden, was Sie sowieso tun sollten.
Zenexer
quelle
1
pt ist für gedruckte Medien und sollte niemals für Bildschirme verwendet werden
sf
@sf CSS definiert pt und px so, dass sie immer das gleiche Verhältnis haben, obwohl diese Begriffe technisch nicht korrekt verwendet werden (72pt = 96px = 1in). Tatsächlich ist px in CSS nicht wirklich ein einzelnes Gerätepixel. Auf meinem Bildschirm entspricht 1 Pixel 2 Gerätepixeln. Der Vorteil der Verwendung von pt gegenüber px besteht darin, dass Sie Elementgrößen relativ zu textbezogenen Größen leicht angeben können.
Zenexer
-2

Die Hälfte (aber nur die Hälfte) der Antwort (die andere Hälfte ist bittere Verachtung der Realität der Bürokratie):

Verwenden Sie vh

Alles ist immer auf das Browserfenster abgestimmt.

Lassen Sie immer nach unten scrollen, niemals zur Seite.

Stellen Sie die Körperbreite auf statische 50 VH ein, und nichts schwebt oder bricht aus dem übergeordneten Div aus. Und stylen Sie nur mit Tischen, damit alles wie erwartet fest an seinem Platz bleibt. Fügen Sie eine Javascript-Funktion hinzu, um alle Strg +/- Aktivitäten des Benutzers rückgängig zu machen.

Jeder wird dich hassen, außer den Leuten, die dir sagen, dass die Dinge zu ihrem Modell passen sollen, und sie werden begeistert sein. Und jeder weiß, dass nur seine Meinung zählt.

Liljoshu
quelle
-3

Ja. Oder eher nein.

Äh, ich meine, es spielt keine Rolle. Verwenden Sie diejenige, die für Ihr bestimmtes Projekt sinnvoll ist. PX und EM oder beide sind gleichermaßen gültig, verhalten sich jedoch je nach CSS-Architektur Ihrer Gesamtseite etwas anders.

AKTUALISIEREN:

Zur Verdeutlichung sage ich, dass es normalerweise wahrscheinlich egal ist, welche Sie verwenden. Manchmal möchten Sie möglicherweise speziell eine über die andere auswählen. EMs sind nett, wenn Sie von vorne anfangen können und eine Basisschriftgröße verwenden und alles relativ dazu machen möchten.

PXs werden häufig benötigt, wenn Sie ein Redesign auf eine vorhandene Codebasis nachrüsten und die Spezifität von px benötigen, um fehlerhafte Verschachtelungsprobleme zu vermeiden.

DA.
quelle
Ihre Antwort lautet also, dass es keine Rolle spielt? Oder gibt es bestimmte Situationen, in denen Sie einander vorziehen würden? Und wenn ja, in welchen Situationen wäre dies der Fall?
@ Samuel ja, es kann Zeiten geben, in denen Sie das eine oder andere verwenden möchten. Ich habe meine Antwort mit weiteren Informationen aktualisiert.
DA.
Entschuldigung, ich war etwas verwirrt mit dem ursprünglichen Wortlaut. Ich glaube, Sie hatten REM im Titel und EM im Körper. Anscheinend fragen Sie speziell nach REM. Die Antwort ist immer noch ziemlich gleich, aber REM hat einige zusätzliche Vorteile zu berücksichtigen, wird jedoch hauptsächlich genauso verwendet wie EM - es ermöglicht Ihnen, eine 'Basis'-Schriftgröße zu verwenden.
DA.
Warum sind " em's [...] nett, wenn Sie von vorne anfangen können und eine Basisschriftgröße verwenden und alles relativ dazu machen möchten ?"? Was ist der Vorteil von (r) em gegenüber px? Ist es so, dass IE-Benutzer die Größe des Textes ändern können, oder gibt es andere Vorteile gegenüber px (was einfacher zu sein scheint)?
EM und REM haben den gleichen Vorteil: Sie können HTML oder BODY auf eine bestimmte Schriftgröße (z. B. 10 Pixel) einstellen und dann alles andere als EM oder REM festlegen. Auf diese Weise ändern Sie einfach diesen ersten 10-Pixel-Stil in 11-Pixel, wenn Sie den gesamten Typ proportional vergrößern möchten. Dies war vor 5 Jahren viel nützlicher, als wir alle unsere eigenen JS-basierten Widgets zur Größenänderung von JS-Schriftarten erstellten. Heutzutage leisten Browser beim Zoomen (insbesondere auf Mobilgeräten) so gute Arbeit, dass ich es als weitaus weniger vorteilhaft empfinde. Wenn Sie PX einfacher finden, ist dies ein Vorteil für Sie und sicherlich ein triftiger Grund, sich für PX zu entscheiden.
DA.
-4

Ems sind der Weg nach vorne, nicht nur für Schriftarten, sondern Sie können sie auch mit Kästchen, Linienstärke und anderen Dingen verwenden. Warum?

Einfach gesagt, Ems sind die einzigen, die zum Zoomen im Einklang mit den Tasten Alt + und Alt im Browser skaliert werden.

Andere Messungen skalieren, aber nicht so sauber wie ein em.

Nebenbei bemerkt, wenn Sie die beste Skalierung wünschen, konvertieren Sie Ihre Grafiken nach Möglichkeit auch in vektorbasiertes SVG, da diese auch mit dem Zoomverhältnis des Browsers sauber skaliert werden.

shawty
quelle
3
Aber die meisten Browser zoomen heutzutage alle Seitenelemente gleich (es sei denn, Sie passen die Grundschriftgröße an), sodass der Vorteil der Verwendung von (r) em für moderne Browser nicht zutrifft, oder?
Es ist und es ist nicht so, obwohl Sie in dem, was Sie sagen, richtig sind, es geht mehr um den Skalierungsfaktor als um das Skalierungsdelta. Das Delta ist unabhängig von der verwendeten Messung immer einheitlich, aber der Skalierungsfaktor (vorausgesetzt, die Berechnungen werden korrekt durchgeführt) wird nach Bedarf angepasst, z. B. für einen Breitbildmonitor gegenüber einem Standardmonitor oder für Rechteckpixel gegenüber Quadratpixeln. Da Rems tatsächlich auf einer echten Druckermessung basieren, passt die Skalierung immer besser, andere (wie%) sind oft bestenfalls ein Delta-Offset
shawty
(Fortsetzung) mit Multiplikation in beide Richtungen und kann daher in einigen Fällen ein schlecht unverhältnismäßiges Betrachtungsverhältnis ergeben.
Shawty
2
"Einfach gesagt, Ems sind die einzigen, die zum Zoomen im Einklang mit den Tasten Alt + und Alt im Browser skaliert werden." = das ist falsch.
DA.
Ok, ich hätte es besser formulieren können, siehe meinen vorherigen Kommentar zur Korrektur.
shawty
-5

EMs sind das EINZIGE, was für Medienabfragen skaliert werden kann, die mit +/- Skalierung umgehen, was Menschen ständig tun, nicht nur Blinde. Hier ist noch eine sehr gut geschrieben professionelle Demonstration, warum dies wichtig ist.

Dies ist übrigens der Grund, warum Zurb Foundation ems verwendet , während der minderwertige Bootstrap 3 immer noch Pixel verwendet.

robmuh
quelle
2
Das ist nicht wirklich richtig. In alten Zeiten konnten Pixel in alten Versionen von IE nicht gezoomt werden. +/- führt jetzt in allen aktuellen Browsern einen vollständigen Seitenzoom durch, sodass dies kein Problem darstellt. Außerdem geht es bei dieser Frage eher um rems als um px - nicht um em vs px.
Rich Bradshaw
1
Ihr bringt mich zum Lachen. Haben Sie sogar versucht, Ihre Website mit +/- Pixeln zu skalieren? Das Aufschreiben über zu zoomende Pixel ist absolut falsch. Stimmen Sie mich ab, was Sie wollen. Stimmen verändern die Realität nicht.
Robmuh
1
Vielleicht nehmen wir etwas andere Dinge in die Hand - können Sie eine einfache Demo erstellen, um den Unterschied zu demonstrieren?
Rich Bradshaw
Ich glaube nicht, dass die Frage ist, welche Einheiten in Medienabfragen verwendet werden sollen ...
Binki