A B E G

Startseite Skripte für das Wintersemester 2017/18 Webdesign Semantic Web CSS Maßeinheiten


CSS Maßeinheiten

Achtung: Verwendet nie als Maßeinheit „pt“ – verwendet „px“!

Macintosh und Windows haben unterschiedliche Bildschirmauflösungen. Verwendet man „pt“, hat z.B. die Schrift auf den beiden Betriebssystemen eine unterschiedliche Größe!

CSS

/* so NICHT! */
body {
    font-size: 16pt;
}

/* so ist es richtig */
body {
    font-size: 16px;
}

In CSS sind Angaben zur Schriftgröße, aber auch zur Breite und Höhe von Elementen sowohl in fixen Werten (px, em, mm, cm, m…) und auch in flexiblen Werten (%) möglich.

Größen-Angaben in mm, cm, m usw. machen jedoch nur Sinn, wenn Ihr die jeweiligen Datei zum Ausdrucken formatieren möchtet!

Geläufige Maßeinheiten für Schriftgrößen in CSS

CSS

/* Pixel-Angaben */
h2 {
    font-size: 16px;
}

/* 
    em-Angaben:
    Größe abhängig von der „Grundgröße“, 
    die man bei body gemacht hat
*/
body {
    font-size: 16px;
}

h2 {
    font-size: 1em; /* Schriftgröße: 16px; */
}

/* größere Grundgröße bei body */
body {
    font-size: 20px;
}

h2 {
    font-size: .8em; /* Schriftgröße: 16px; */
}

/* kleinere Grundgröße bei body */
body {
    font-size: 14px;
}

h2 {
    font-size: 1.2em; /* Schriftgröße: 16.8px; */
}