Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

www.pxtoem.com – Onlinetool, um Pixel in EMs umzuwandeln

Posted by sura1 - 12. Januar 2009

jan12_128x128
Bookmark and Share

http://pxtoem.com/

pxtoem_screenshot

Auf der Webseite http://pxtoem.com/ haben Sie die Möglichkeit, ganz einfach Pixel in EMs und umgekehrt umwandeln.

Erläuterungen:

Alle populären Browser haben eine Standard-Schriftgrösse von 16px. Daher ist, mit der Standard-Browsereinstellung: 1em = 16px. Deshalb gilt: Wenn die Schriftgrösse 16px hoch ist, dann ist 1em = 16px.

pxtoem1

Ein em war ursprünglich gleich zu der Grösse des Metall Blocks, der zum Schneiden eines einzelnen Buchstabens einer spezifischen Schriftart verwendet wurde. Es war in etwa vergleichbar mit der Breite von einem Großbuchstaben „M“………….

Bericht zu Pixel in EMs umwandeln:

Sehen Sie hier zum Thema Pixel und EMs einen ausführlichen Artikel mit dem Namen „Die unglaublichen Em & elastischen Layouts mit CSS“.

Englischer Originalartikel:

The Incredible Em & Elastic Layouts with CSS

Beispiel:

pxtoem11

[zum Vergrößern bitte auf die Grafik klicken!]

Wählen Sie zum Beispiel 12 Pixel als Standard-Schriftgröße, dann bedeutet dies folgendes:

12px = 1em = 100% Schriftgröße ( siehe Grafik rechts oben!)

So können Sie hier für jede x-beliebige Schriftgröße die Pixel rasch in EMs umwandeln.

EM-Calculator:

Ganz rechts auf der Seite PXtoEM.com finden Sie noch ein zusätzliches Tool, mit dem Sie EMs in Pixel und Pixel in EMs umrechnen können. Hier können Sie jedoch die Schriftgröße auch per Hand eintippen und über die Begrenzung von 24 Pixeln hinausgehen.

Siehe 2 Beispiele:

pxtoem2 pxtoem3

Standard-Schriftgröße: 42 px :

1.  36 px = 0.857 em (Grafik links)
2.  1.3 em = 55 px (Grafik rechts)

gradient3

Ähnliche Artikel:

CSS-Tricks: Walking Links – Spazierende Links [31. August 2008]
CSS-Experimente: Flashartige Links mit CSS erstellen [10. September 2008]
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box [12. September 2008]
CSS-Tricks: Kennzeichnung von besuchten Links [21. September 2008]
CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen) [27. September 2008]
CSS Bildergalerie – CSS Sliding Gallery von CSSPlay [9. Oktober 2008]
CSSplay: Inline links – block styling [27. Oktober 2008]
3D-Wirkung mit CSS: Schatteneffekte für Fotos und Grafiken [30. Oktober 2008]

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: