Sollte ich in meinem CSS px- oder rem-Wert-Einheiten verwenden?

Question

Ich entwerfe eine neue Website und möchte, dass sie mit so vielen Browsern und Browsereinstellungen wie möglich kompatibel ist. Ich versuche zu entscheiden, welche Maßeinheit ich für die Größen meiner Schriftarten und Elemente verwenden soll, kann aber keine schlüssige Antwort finden.

Meine Frage ist: Sollte ich die px o rem in meinem CSS?

• Bislang weiß ich, dass die Verwendung von px ist nicht kompatibel mit Nutzern, die die Grundschriftgröße in ihrem Browser einstellen.
• Ich habe nicht beachtet, dass em s, weil sie im Vergleich zu anderen Systemen mehr Aufwand bei der Wartung verursachen. rem s, wenn sie kaskadieren.
• Einige sagen, dass rem s sind unabhängig von der Auflösung und daher wünschenswerter. Andere wiederum sagen, dass die meisten modernen Browser ohnehin alle Elemente gleich stark zoomen, so dass die Verwendung von px ist kein Problem.

Ich frage das, weil es viele verschiedene 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.

Answer 1

Als reflexartige Antwort würde ich die Verwendung von rem empfehlen, da Sie damit die "Zoomstufe" des gesamten Dokuments auf einmal ändern können, falls erforderlich. In einigen Fällen, wenn die Größe relativ zum übergeordneten Element sein soll, dann verwenden Sie em.

Aber Die Unterstützung für rem ist lückenhaft, IE8 braucht ein Polyfill und Webkit weist einen Fehler auf. Außerdem kann die Subpixel-Berechnung dazu führen, dass Linien mit einem Pixel manchmal verschwinden. Die Abhilfe besteht darin, für solche sehr kleinen Elemente in Pixeln zu kodieren. 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 manchen Fällen heißt es ja, in anderen Fällen nein.

Es hängt also von Ihren Bedürfnissen 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 gesagt zu konvertieren) (JavaScript ist eine andere Geschichte), denn die folgenden beiden CSS-Codeblöcke würden das gleiche Ergebnis liefern:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

---

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}

Answer 2

Ich habe herausgefunden, dass es am besten ist, die Schriftgrößen einer Website zu programmieren, indem man eine Basisschriftgröße für die body und verwenden dann em's (oder rem's) für jede andere font-size Ich erkläre daraufhin. Das ist wohl eine persönliche Vorliebe, aber es hat mir gute Dienste geleistet und es auch sehr einfach gemacht, ein mehr reaktionsfähiges Design .

Was die Verwendung von Rem-Units angeht, so ist es meiner Meinung nach gut, ein Gleichgewicht zwischen progressivem Code und der Unterstützung älterer Browser zu finden. Informieren Sie sich unter diesem Link über die Browserunterstützung für rem units Das sollte Ihnen bei Ihrer Entscheidung sehr helfen.

Answer 3

pt ist vergleichbar mit rem Die Funktion ist relativ fest, aber fast immer DPI-unabhängig, selbst wenn nicht-konforme Browser sie behandeln. px in einer geräteabhängigen Weise. rem variiert mit der Schriftgröße des Root-Elements, aber Sie können etwas wie Sass/Compass verwenden, um dies automatisch mit pt .

Wenn du das hättest:

html {
    font-size: 12pt;
}

dann 1rem wäre immer 12pt . rem y em sind nur so geräteunabhängig wie die Elemente, auf denen sie beruhen; einige Browser verhalten sich nicht gemäß den Spezifikationen und behandeln px buchstäblich. Sogar in den alten Tagen des Internets 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 Sie haben:

html {
    font-size: 16px;
}

dann 1rem wird geräteabhängig sein. Für Elemente, die erben würden von html standardmäßig, 1em würde auch geräteabhängig sein. 12pt wäre die hoffentlich garantierte geräteunabhängige Entsprechung: 16px / 96px * 72pt = 12pt donde 96px = 72pt = 1in .

Die Berechnung kann ziemlich kompliziert werden, wenn man sich an bestimmte Einheiten halten will. Zum Beispiel, .75em of html = .75rem = 9pt und .66em of .75em of html = .5rem = 6pt . Eine gute Faustformel:

• Utilice pt für absolute Größen. Wenn Sie wirklich brauchen, dass dies relativ zum Root-Element dynamisch ist, überfordern Sie CSS; Sie brauchen eine Sprache, die CSS kompiliert, wie Sass/SCSS.
• Utilice em für relative Größen. Es ist ziemlich praktisch, wenn man sagen kann: "Ich möchte, dass der linke Rand die maximale Breite eines Buchstabens hat", oder: "Der Text dieses Elements soll ein wenig größer sein als die Umgebung". <h1> ist ein gutes Element für die Verwendung einer Schriftgröße in ems, da es an verschiedenen Stellen erscheinen kann, aber immer größer als der benachbarte Text sein sollte. Auf diese Weise müssen Sie nicht für jede Klasse, die auf ein Element angewendet wird, eine eigene Schriftgröße haben. h1 : Die Schriftgröße wird automatisch angepasst.
• Utilice px für sehr kleine Größen. In sehr kleinen Größen, pt kann in einigen Browsern bei 96 DPI unscharf werden, da pt y px nicht ganz übereinstimmen. Wenn Sie nur einen dünnen Ein-Pixel-Rand erstellen möchten, sagen Sie dies. Wenn Sie einen Bildschirm mit hohem DPI-Wert haben, werden Sie dies beim Testen nicht bemerken. Testen Sie daher einmal auf einem allgemeinen Bildschirm mit 96 DPI.
• Verwenden Sie keine Subpixel, um die Darstellung auf Bildschirmen mit hohem DPI zu verbessern. Einige Browser unterstützen dies vielleicht - insbesondere bei Displays mit hohem DPI-Wert -, aber es ist ein Tabu. Die meisten Benutzer bevorzugen eine große und klare Darstellung, obwohl das Web uns Entwicklern etwas anderes beigebracht hat. Wenn Sie Ihren Nutzern mit modernen Bildschirmen mehr Details bieten möchten, können Sie Vektorgrafiken (sprich: SVG) verwenden, was Sie ohnehin tun sollten.

Answer 4

Halb (aber nur halb) bissige Antwort (die andere Hälfte ist bittere Verachtung für die Realität der Bürokratie):

vh verwenden

Alles wird immer auf die Größe des Browserfensters angepasst.

Nach unten scrollen immer zulassen, aber horizontales Scrollen deaktivieren.

Legen Sie eine statische Body-Breite von 50vh fest, und codieren Sie niemals Css, das schwebt oder aus dem übergeordneten Div ausbricht. (Wenn sie versuchen, etwas zu entwerfen, das so aussieht, kann die geschickte Verwendung eines Hintergrund-Gifs sie aus der Bahn werfen). Und gestalten Sie nur mit Tabellen, damit alles wie erwartet starr an seinem Platz bleibt. Fügen Sie eine Javascript-Funktion ein, um jede Strg+/--Aktivität des Benutzers rückgängig zu machen.

Die Nutzer werden Sie hassen, weil die Website je nach Gerät nicht anders funktioniert (z. B. ist der Text auf Handys zu klein, um ihn zu lesen). Ihre Mitarbeiter werden Sie hassen, weil niemand, der bei klarem Verstand ist, so etwas tut, und es wird wahrscheinlich kaputt gehen ihre Arbeit (allerdings nicht Ihre). Ihre Programmierprofessoren werden Sie hassen, weil dies keine gute Idee ist. Ihr UX-Designer wird Sie hassen, weil es die Ecken und Kanten aufdecken wird, die sie bei der Entwicklung von UX-Mockups einsparen, um die Fristen einzuhalten.

Fast jeder wird Sie hassen, außer den Leuten, die Ihnen sagen, dass Sie die Dinge so schnell wie möglich an das Modell anpassen sollen. Diese Leute jedoch (zu denen in der Regel auch die Projektleiter gehören) werden von Ihrer Genauigkeit und der kurzen Bearbeitungszeit begeistert sein. Und jeder weiß, dass ihre Meinung die einzige ist, die für Ihren Gehaltsscheck zählt.

Answer 5

Ja. Oder besser gesagt, nein.

Äh, ich meine, das spielt keine Rolle. Verwenden Sie diejenige, die für Ihr spezielles Projekt sinnvoll ist. PX und EM sind beide gleichermaßen gültig, verhalten sich aber je nach der CSS-Architektur Ihrer Gesamtseite ein wenig anders.

UPDATE:

Um das klarzustellen, behaupte ich, dass es in der Regel keine Rolle spielt, welche Sie verwenden. Manchmal möchten Sie vielleicht das eine dem anderen vorziehen. EMs sind schön, wenn Sie von Grund auf neu beginnen können und wollen eine Basisschriftgröße zu verwenden und machen alles relativ zu, dass.

PXs werden oft benötigt, wenn man ein Redesign in eine bestehende Codebasis einbaut und die Spezifität von px benötigt, um schlechte Verschachtelungen zu vermeiden.