2016-05-05 10 views
14

würde Ich mag wissen, warum Bootstraprem und em statt px für die neue Version von Bootstrap 4 wählen.Warum Bootstrap 4 rem und em statt px wählen?

We can see here

Einige Beispiele Variablen:

$font-size-h1: 2.5rem !default; 
    $font-size-h2: 2rem !default; 
    $font-size-h3: 1.75rem !default; 
    $mark-padding: .2em !default; 

Es ist eine gute Praxis Verwendung em und rem für:

margin: 0; 
    padding: 0; 
    bottom: 0px; 
    width: 100%; 

ich nur neugierig bin, dass ich konnte nicht Finden Sie im Internet darüber, so dass Grund, frage ich.

+0

Die von Ihnen angegebenen Beispiele wären keine guten Kandidaten, da 0-Werte nicht relativ zu der im Stammelement festgelegten Größe sind und 100% -Werte nicht mit rem gemacht werden können. – jeroenvisser101

Antwort

14

Mit rem sind alle Schriftgrößen relativ zum Stammelement (aka, das html-Tag). Der Grund dafür ist, dass das Skalieren für Geräte vereinfacht wird. Sie könnten das HTML-Tag technisch auf eine kleinere oder größere Größe ändern, um alle Schriftgrößen gleichmäßig zu skalieren - was eine super nette Funktion ist.

... [T] er Hauptsache zum Mitnehmen ist alles ist dynamisch und relativ zum Stamm HTML-Tag.

Zum Beispiel, ändern Sie die HTML-CSS-Schriftgröße auf eine andere Nummer ... und beobachten Sie, wie das gesamte Raster passt und skaliert.

Quelle: Scotch.io (https://scotch.io/bar-talk/whats-new-in-bootstrap-4#toc-new-unit-rems-for-typography)

+0

wunderbare Antwort, vielen Dank. Kann ich das für Breite, Polsterung und Rand verwenden? – Raduken

+0

REMs sind fast überall nützlich, wenn die Größe explizit festgelegt wird. – isherwood

+0

Sowohl EMs als auch Pixel haben ihre Nachteile bei Medienabfragen, wenn es um die Differenz einer Dezimalstelle dieser Einheit geht. Wenn Sie Medienabfragen mit minimaler und maximaler Breite im selben Codeblock verwenden, haben Sie eine schlechte Zeit, sobald der Benutzer den Zoom oder die Standardschriftgröße des Browsers ändert. https://engagetinteractive.co.uk/blog/em-vs-rem-vs-px – Neel

1

Es ist erwähnenswert, dass Bootstrap 4 (derzeit v4.0.0-beta) gehalten Stützpunkte in px und nicht em. Vom docs:

Während Bootstrap ems oder rem für die Definition der meisten Größen verwendet wird pxs für das Netz Stützpunkte und Containerbreiten verwendet. Dies liegt daran, dass die Breite des Darstellungsbereichs in Pixel ist und sich nicht mit der Schriftgröße ändert.