Ems zu Pixel-Konvertierung - Warum 62,5% und nicht 6,25%?

Question

Ich weiß, dass viele von uns damit vertraut sind, die Schriftgröße für das body-Element in unserem CSS auf 62,5% zu setzen. Das bedeutet, dass 1em gleich 10px ist und hilft, Pixel perfekt zu halten, aber auch die Skalierung von Schriftarten zulässt.

Also würde das nicht bedeuten, dass die Einstellung auf 6,25% 1em = 1px entspricht? Scheint wie eine noch einfachere Umwandlung, anstatt mit Dezimalzahlen zu verwirren ...

---

Danke Jungs! Ich bin ziemlich bewusst, die em und es ist Geschichte (Design-Grad), aber ich bin sicher, andere finden es hilfreich :)

Soweit die 1em = 1px, sehe ich nicht, wie dies nicht wünschenswert ist. Das em ist quadratisch, unabhängig von Ihren Einheiten (seien es Punkte oder Pixel) und niemand würde seinen Typ auf 1px setzen (so wie niemand den gedruckten Typ auf 1pt setzen würde). Darüber hinaus räumt sogar Ihr Artikel ein, dass in den meisten digitalen Schriftarten das Großbuchstabe "M" normalerweise kleiner als 1em ist, und dass das em nur eine Reflexion der Punktgröße ist (48pt-Typ würde ein 48pt von 48pt Quadrat für das em machen, 12pt Typ würde 12x12, etc. ergeben)

Außerdem würden die Leute mehr dafür tun, Maße von anderen Elementen auf der Seite einzustellen, so dass alles schön passt, wenn der Benutzer ihre Schriftgröße anpasst. Klar, es wird immer die wenigen geben, die ihren Standard auf etwas anderes als 16px setzen, aber den Preis für ein perfektes Pixel-Layout, das schön skaliert, sind es wert.

Answer 1

Wohl, aber dann verlieren Sie die Kontrolle über Ihre Waage. Vergessen Sie nicht, dass Überschriften normalerweise dieselben Größen im Verhältnis zu ihrem Rang erben (d. H. <h1> wird am größten sein, <h2> etwas kleiner). Wenn Sie diese Elemente verringern möchten, müssen Sie em-Werte mit vielen Dezimal-Platzhaltern verwenden. Stellen Sie sich <h4> font-size: 0.005em vor.

Oder noch schlimmer, wenn Sie Schriften größer skaliert werden möchten, könnten Sie möglicherweise font-size: 40em oder etwas lächerlich aussehen.

Kurz gesagt, 1em = 10px ist viel praktischer für die skalierten Werte von Schriftarten. Während eine 1: 1-Skala auf dem Papier Sinn machen könnte, eignet sie sich nicht so gut für vernünftiges und wartbares CSS.

Answer 2

Die Konvertierung mag einfacher sein, aber ein em würde nicht bedeuten, was es bedeuten soll.

1em soll gleich der Breite sein, wenn ein "M" in einer bestimmten Schriftart groß geschrieben wird. Wenn die Breite des Buchstabens M 1 Pixel ist, wird Ihre Schriftart nicht lesbar sein.

http://en.wikipedia.org/wiki/Em_(typography)

Answer 3

Zunächst einmal nicht davon ausgehen, dass 1 em 10 Pixel betragen wird. Eine em-Einheit steht in direktem Zusammenhang mit der verwendeten Typografie. Wenn jemand eine Schriftgröße von 16 Pixel hat, dann ist 62,5% tatsächlich 10 Pixel (16 * 0,625 = 10), aber das wird sich natürlich ändern, wenn jemand seine Standardschriftgröße geändert hat.

Zweitens ist dies das erste, das ich jemals von der Verwendung von 62,5% für den Grundkörper font-size gehört habe. Ich benutze immer einen font-size von 76% basierend auf Sane CSS Typography by Owen Briggs.

Schließlich, um Ihre Frage zu beantworten, ja könnten Sie eine Schriftgröße von 6,25% verwenden und dann 12em anstelle von 1.2em zum Beispiel verwenden. Ich würde diese Methode jedoch sehr ablehnen. In der Welt der Typografie soll ein Em the width of the capital letter 'M' sein.Diese Methode verstößt völlig gegen diese gängige Praxis und wird jeden ernsthaft irritieren, der Ihr CSS in Zukunft beibehalten wird.

Answer 4

Die ganze "62,5% = 10px" -Ding ist sowieso grundlegend gebrochen - 62,5% kann oder kann nicht 10px je nach dem Browser, den Benutzereinstellungen und vor allem der Mindestgröße der Schriftgröße sein. Sie können also nicht einfach in Pixeln entwerfen und dann unter der Annahme, dass 62,5% = 10px sind, zu ems "konvertieren", weil Ihr Design die ganze Zeit bricht. Wenn Sie ein pixelgenaues Design wünschen, müssen Sie Pixel als Einheit verwenden. Wenn Sie ein flexibles Design wünschen, müssen Sie über die geeigneten Einheiten für verschiedene Elemente der Website nachdenken - ems für Elemente, die für die Textgröße relevant sein sollten, Prozentsätze für Elemente, die relativ zur Fenstergröße skalieren sollten, und Pixel für Elemente (wie Bilder), die überhaupt nicht skalieren sollten.

Jeder, der font-size: 62,5% in seinem CSS enthält, versteht grundlegend nicht, wie man für das Netz entwirft.

Answer 5

Sie könnten dies auch nützlich finden. http://pixel2em.kleptomac.com Dies bietet einen Online-Konverter für die Umwandlung von Pixeln in einen anderen, und Sie können auch eine komplette CSS-Dateikonvertierung durchführen.

Answer 6

Eine aktualisierte Version ist verfügbar unter http://pixelconverter.kleptomac.com Es ist ein Online-Einheiten-Konverter zum Konvertieren von Pixeln, Punkt, EM, Prozentsätze. Dies unterstützt die Konvertierung von/zu jeder dieser Einheiten.

Answer 7

Große Frage.

Ich sehe 6,25% als ein interessantes Angebot für adaptives/Responsive Webdesign und elastische Vorlagen.

Insbesondere Schriftgröße mit rem Einheit verleiht es sich zu Ihrem Argument ... ein 1: 1-Verhältnis ist nur einfacher.

rem: "root em" ... die Schriftgröße des Wurzelelements. http://www.w3.org/TR/css3-values/

Sehen Sie dieses rem Beispiel aus: http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ 

Und jetzt mit Ihrem Vorschlag ...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */ 
body { font-size: 14px; font-size: 14rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 24rem; } /* =24px */ 

... Spielen mit meinem JSBin Beispiel: Testing CSS3 "rem" Units for Elastic Content

Ein Verhältnis von 1: 1 zu px sollte zu l führen Tippfehler.

REM Hinweise: Mit der richtigen CSS-Resets und body die Basis font-size in beiden px und rem Ihre Stile erklärt degradieren graziös ... Wenn rem unterstützt wird, und erklärt, nachdem px, ist es Wert angewendet wird. Ansonsten fällt der Browser auf px zurück.

Ermittlung der Unterstützung (besonders auf mobilen) für rem. Bitte drücken Sie diese Seite mit allen/allen Browsern/Geräten, die Sie ...http://ahedg.es/w/rem.html

Answer 8

Ich habe versucht, das gleiche zu tun, aber lief auf ein Problem mit rems für Margen und Paddings. Die Einstellung font-size auf 62,5% vermeidet diese Probleme.

Zum Beispiel die folgende CSS

html { 
    font-size: 6.25% /* 16px * .0625 => 1px */ 
} 

p { 
    font-size: 1rem; 
    margin: 1rem; 
} 

macht wie:

p { 
    font-size: 1px; 
    margin: 9px; /* WTF?! */ 
} 

Seltsam, nicht wahr? Ich gehe davon aus, dass dies durch einen merkwürdigen Konflikt mit minimalen Schriftgrößen verursacht wird.

---

Nun, wenn Sie font-size: 62.5% auf der anderen Seite verwenden, die Dinge machen, wie erwartet:

html { 
    font-size: 62.5% /* 16px * .625 => 10px */ 
} 

p { 
    font-size: .1rem; 
    margin: .1rem; 
} 

macht wie:

p { 
    font-size: 1px; 
    margin: 1px; 
}