Wenn du ein Webseiten-Projekt mit der CSS3 Schriftgrößen-Einheit rem umsetzen möchtest, ist es derzeit noch wichtig eine Pixel Fallback-Lösung für ältere Browser (z.B. IE8 und darunter) anzubieten. Um nicht immer wieder die korrekten rem-Werte ausrechnen zu müssen, habe ich eine praktische rem/px-Tabelle mit den vorbereiteten Werten zum Kopieren und Einfügen erstellt.
[css]
font-size:10px;
font-size:0.625rem;
font-size:11px;
font-size:0.6875rem;
font-size:12px;
font-size:0.75rem;
font-size:13px;
font-size:0.8125rem;
font-size:14px;
font-size:0.875rem;
font-size:15px;
font-size:0.9375rem;
font-size:16px;
font-size:1rem;
font-size:17px;
font-size:1.0625rem;
font-size:18px;
font-size:1.125rem;
font-size:19px;
font-size:1.1875rem;
font-size:20px;
font-size:1.25rem;
font-size:21px;
font-size:1.3125rem;
font-size:22px;
font-size:1.375rem;
font-size:23px;
font-size:1.4375rem;
font-size:24px;
font-size:1.5rem;
font-size:25px;
font-size:1.5625rem;
font-size:26px;
font-size:1.625rem;
font-size:27px;
font-size:1.6875rem;
font-size:28px;
font-size:1.75rem;
font-size:29px;
font-size:1.8125rem;
font-size:30px;
font-size:1.875rem;
font-size:31px;
font-size:1.9375rem;
font-size:32px;
font-size:2rem;
font-size:32px;
font-size:2.0625rem;
font-size:34px;
font-size:2.125rem;
font-size:35px;
font-size:2.1875rem;
font-size:36px;
font-size:2.25rem;
font-size:37px;
font-size:2.3125rem;
font-size:38px;
font-size:2.375rem;
font-size:39px;
font-size:2.4375rem;
font-size:40px;
font-size:2.5rem;
[/css]
[divider]
Du kannst dir die Werte direkt hier im Artikel kopieren oder die bereits vorbereitete rem.css Datei downloaden. Bei meinem aktuellen Projekt hatte ich die rem.css Datei einfach immer im Text-Editor geöffnet. Bei Bedarf konnte ich dann meine Werte einfach kopieren und im Stylesheet einfügen. Die Werte sind ausgehend von einer Standard-Browserschriftgröße von 16px. Diese kannst du garantieren, indem du im body tag die Schriftgröße auf 100% setzt body {font-size:100%;}
.
Ich hoffe du kannst die Tabelle auch gut für deine Webseiten-Umsetzungen nutzen. Für den Fall, dass du größere oder kleinere Werte benötigst, kannst du die Tabelle fortsetzen, indem du den benötigten Wert durch 16 teilst. So bekommst du deinen richtigen rem-Wert.
Schreibe einen Kommentar