Die letzten Tage habe ich mit Einheiten im responsiven Webdesign und Webdesign im Allgemeinen gearbeitet. Meine Frage bezieht sich auf Einheiten für Größen in CSS überhaupt , was bedeutet, dass nicht nur font-size, sondern auch padding, width, media queries, ...
gemeint sindEs scheint, dass px für die meisten Anwendungsfälle, die von den meisten professionellen Webdesignern schlecht sind, als hübsch angesehen wird.
Einige Artikel, die mich zu dieser Annahme kommen lassen
Hier ein Artikel, der auch eine Meinung pro px hat: Soll ich in meinem CSS px oder rem-Werte verwenden?
Der große Vorteil von EM-Medienabfragen besteht darin, dass diese Medienabfragen nach vielen Artikeln sogar dann angewendet werden, wenn der reine Zoom des Browsers verwendet wird.
Ich denke jedoch, dass alle modernen Browser den ganzseitigen Zoom unterstützen, der auch in Pixel definierte Medienabfragen anwendet (getestet in aktuellem Firefox und IE).
em (oder rem) scheint für die Schriftgröße (Zugänglichkeit) empfohlen zu werden, aber was ist mit den anderen Größen?
Erhöhte Zugänglichkeit ist meiner Meinung nach kein wichtiger Grund mehr, weil moderne Browser den ganzseitigen Zoom unterstützen. Ich habe keine Ahnung von Screenreadern, aber ich kann mir nicht vorstellen, dass sie in den letzten Jahren nicht verbessert wurden.
Es ist einfach, die Größe der gesamten Site durch Ändern der Basisgröße zu ändern.
Wenn es sich um eine dauerhafte Änderung für jedes Gerät handelt, sollte es bei Verwendung eines CSS-Präprozessors sehr einfach sein.
Der einzige Grund, den ich finden konnte, war im Artikel css-tricks.com, weil Sie vielleicht alle Größen auf mobilen Geräten geändert haben möchten. Willst du das wirklich für alle / die meisten Elemente? Für einige Fälle wie große Überschriften scheint es nützlich zu sein, aber warum sollte ein mobiler Benutzer kleineren Text besser lesen können als ein Desktop-Benutzer? Zusätzlich kompensiert die Messung in Bezugspixeln die verschiedenen DPIs.
Ich habe ihren Quellcode grob analysiert, wahrscheinlich habe ich einige Dinge übersehen.
An den meisten Stellen wird px verwendet: Schriftgröße, Medienabfragen, Padding, Rand ... Das Rastersystem verwendet zumindest für die Breiten Prozente. Sie können jedoch viele Fragen zu diesem Thema bei Github finden. Viele Leute verlangen em / rem.
Es basiert auf rem und em und verwendet in kleinen Fällen px, aber nur für Grenzen etc.
Medienabfragen und Schriftgröße in em und eine Mischung aus verschiedenen Einheiten für alles andere: px,%, em.
font-size, padding, margin meist in px, aber media-Abfragen in em und einige Breiten in%.
Bisher habe ich überall gelesen, dass Sie relative Größen verwenden sollten und dies getan haben. Wenn es vernünftige Gründe dafür gibt (und ich denke es, weil viele Profis dies tun), werde ich das weiter machen / verbessern, aber es war komplizierter als die Verwendung von px.
Wenn Sie annehmen, dass die meisten Leute ganzseitigen Zoom verwenden, wo ist das Problem mit px für alles, eine konsistente Einheit zu haben, scheint nett zu sein? (Unterstützende Personen, die ihren Browser / ihr Gerät seit fast 10 Jahren nicht aktualisiert haben (IE & lt; = 7), ist nicht mein Ziel.)
Was ist der Weg zu gehen? (Bitte beachten Sie die unterschiedlichen Eigenschaften Schriftgröße, Breite, Medienabfragen, ...)
% für horizontales Seitenlayout em funktioniert hervorragend für vertikale Abstände font-size bevorzugen (ich mag em ) em für Medienabfragen Ich finde, dass meine Verwendung verschiedener CSS-Maßeinheiten mit dem Messgebiet variiert, mit dem ich es zu tun habe: horizontal, vertikal, Typografie oder Medienabfrage.
Der horizontale Raum gibt der Seite Struktur. Daher funktionieren horizontale Messungen gut mit Einheiten relativ zur Seitenbreite ( % ). Zum Beispiel ist es großartig, dem Hauptinhalt ein wenig Raum zum Atmen zu geben:
Komplexere Layouts (z. B. Spalten) funktionieren auch dann gut, wenn eine oder alle horizontalen Messungen proportional zur Seite oder zu ihrem Container sind.
%Vor%Es gibt eine logische Folge dieser Idee, nämlich dass Sie, wenn Sie Ihre Containerstruktur gut einrichten, Sie müssen nicht viel horizontal auf den Inhalt anpassen . Sie lassen die Elemente auf Blockebene im Grunde die Breite ihres Containers ausfüllen, wie sie es gerne tun, und Sie sind fertig.
Vertikaler Raum ist mehr über die Struktur des Inhalts (dh wie nahe Elemente im Dokumentenfluss zueinander stehen), und ich denke, dass diese Messungen sowohl mit festen als auch mit relativen Einheiten funktionieren ( px oder em ) .
Wenn Sie hier jedoch relative Einheiten verwenden, erhalten Sie einen vertikalen Rhythmus , was sehr erfreulich sein kann. Sie können auch Änderungen an Ihrem Inhalt vornehmen (lesen Sie: font-size ) und den vertikalen Abstand proportional halten.
Font-Messungen fallen in eine eigene Kategorie, vielleicht weil font-size die Basis für alle anderen Messungen in em ist. Ich habe Befürworter für verschiedene Strategien gesehen, aber von dem, was ich gesehen habe, wird jede Messung gut funktionieren, solange Sie wissen, was Sie tun.
Die Einstellung von font-size in px ist extrem zuverlässig und einfach zu berechnen. Im Alter nach IE6 skaliert es auch schön, also gibt es wirklich keinen Grund, px nicht zu verwenden, wenn Sie das bevorzugen.
Das einzige Problem, das ich bei der Verwendung von px sehe, ist, dass es die CSS-Kaskade nicht nutzt. Mit anderen Worten, sobald ich Größen in px angegeben habe, muss ich zurückgehen und jede einzelne davon einzeln ändern, wenn ich große Änderungen vornehmen möchte.
Trotz aller Nachteile denke ich, dass em eine sehr gute Möglichkeit ist, font-size anzugeben. Was ich mag, ist, dass ich schnell die Beziehung zwischen meinen Schriftgrößen sehen kann. Oft interessiert es mich nicht, was die genaue Größe der Schriftart ist, denn das Wichtigste für mich ist die Beziehung dieser Größe zu allen anderen Größen auf der Seite.
Wichtig bei der Verwendung von em ist, dass die Größen so nah wie möglich an das End-Tag gesetzt werden. Das bedeutet, dass ich die Schriftarten für Container nicht festlegen darf:
Und vor allem Größen für Überschriften und Textelemente:
%Vor%Jedenfalls mag ich, dass ich die Beziehung zwischen den Größen dort klar und einfach sehen kann.
Die Dimensionierung basierend auf der Basisschriftgröße des Browsers scheint dem Webstandard zu entsprechen, da Sie dann Browser zulassen, deren optimale Basisschriftgröße möglicherweise nicht 16px beträgt. In der Praxis funktioniert es jedoch in umgekehrter Richtung. Von dem, was ich gesehen habe, verwenden Browser 16px als Basisschriftgröße, da dies von allen erwartet wird, und legen die tatsächliche Größe der CSS-Messung so fest, dass sie im Browser anständig aussieht.
Der größte Nachteil, den ich hier sehe, ist die Browser-Unterstützung . Wenn Sie für Browser codieren, die rem nicht unterstützen, fügen Sie Ihre Regeln zweimal hinzu:
Andere Font-Messungen sind viel einfacher herauszufinden, wenn Sie font-size haben, da die meisten anderen Font-Messungen in die Kategorie der vertikalen oder horizontalen Messung fallen. Zum Beispiel:
In den meisten Fällen gibt es kaum Unterschiede zwischen der Art und Weise, in der Browser in Medienabfragen em und px verarbeiten. Dies gilt auch dann, wenn ein Benutzer die Größe der Seite mithilfe des Textzooms ändert.
JEDOCH, wenn jemand die Standardtextgröße in seinen Browsereinstellungen geändert hat, verhalten sich die Dinge sehr unterschiedlich. Siehe meine Antwort auf eine verwandte Frage und meine codepen Demo für eine längere Erklärung.
Kurz gesagt, während px in den meisten Fällen für Medienanfragen gut funktioniert, ist es definitiv sicherer, mit em zu gehen.
Es gibt sicherlich Fälle, in denen die obigen allgemeinen Kommentare nicht zutreffen. Zum Beispiel können Sie feststellen, dass em s immer dann nützlich ist, wenn Sie Dinge proportional zur Schriftgröße haben möchten, wie zum Beispiel:
Oder möchten Sie die Zeilenlänge für die Lesbarkeit einschränken:
%Vor% Wie in anderen Kommentaren erwähnt, funktioniert px immer noch gut für Grenzen und solche Dinge. Es kann auch gut zum Auffüllen sein, besonders wenn Sie es mit box-sizing :
Es gibt bereits eine gute Antwort auf diese Frage: Soll ich PX oder REM verwenden?
Aber um das hinzuzufügen, basieren die Artikel, auf die Sie sich mit "Alle gegen px" beziehen, im Allgemeinen auf Missverständnissen oder falschen Annahmen.
Zum Beispiel sind PX relativ (siehe die andere Antwort). Aus Sicht der Zugänglichkeit (mein Bereich der Anstrengung), Zoom ist jetzt die Standardmethode, um Dinge größer / kleiner zu machen, so PX vs EM ist irrelevant. (Der Browser stellt in beiden Fällen CSS-Pixel dar.)
Auch (für den Cloudfour-Artikel) Webkit hatte früher einen Fehler , aber es das vor einer Weile behoben (pre-split mit blink), so dass PX nun Medienabfragen beim Zoomen auslöst.
Grundsätzlich wird alles, was Sie verwenden, in (CSS) Pixel umgewandelt, also liegt es an Ihnen.
Persönlich habe ich eine Basisgröße in PX (in der Regel 16px) und dann Größe in REM festgelegt. Das bedeutet, dass es einfach ist, die Größen relativ zur Basis festzulegen, einschließlich Auffüllen / Rand usw. Dann können Sie die Basispixel innerhalb verschiedener Medienabfragen leicht ändern. Sie können bei Bedarf auch PX-Fallbacks für ältere Browser bereitstellen.
Ich habe persönlich die Wechsel-EMs gemacht und hatte keine Probleme damit. Es eignet sich hervorragend für alles, in das Sie normalerweise Pixel einfügen. Es gibt nur ein paar Szenarios, in denen ich px immer noch verwende und das gilt für Ränder und Schatten und andere Dinge, die ich nicht mit der Schriftgröße vergrößern / verkleinern möchte.
Da EMs eine dynamisch berechnete PX-Größe haben, funktionieren sie gut in Situationen, in denen Sie Ihre Größe "kennen". Ein großartiges Tool zum Umwandeln von PX in EM (oder umgekehrt)
Ich verwende% für flüssige Elemente, anstatt ein spezifisches Gittersystem zu definieren, das für meine eigenen Bedürfnisse gut funktioniert hat. Aber ich habe diesen Ansatz nicht ausprobiert, während ich gleichzeitig Grids / Responsive-Frameworks von Drittanbietern nutze. Der Kilometerstand kann daher variieren.
Tags und Links html5 css3 accessibility responsive-design typography