Webdesign - Webseiten planen, gestalten - Free-Hack Library

CSS
Um die Verwendung der Queries zu veranschaulichen, erstellen
wir nun ein einfaches Beispiel. Eine Website soll unterschiedliche
Hintergrundfarben erhalten, je nachdem, ob der Benutzer einen
großen Computermonitor (Bildschirmbreite größer als 1024 Pixel -
dunkelblau), ein Netbook (bis maximal 1024 Pixel Breite - gelbgrün)
oder ein Smartphone im Quer- (hellblau) oder Hochformat (rot)
verwendet.
@media screen and (min-width: 1025px) {
body {
/*dunkelblau*/
background-color: #203e5d;
color: #ffffff;
}
}
@media screen and (max-width: 1024px){
body {
/*gelb-grün*/
background-color: #cad652;
color: #000000;
}
}
@media screen and (max-device-width: 480px) and (orientation:
landscape) {
body {
/*hellblau*/
background-color: #5c7eba;
color: #ffffff;
}
}
@media screen and (max-device-width: 480px) and (orientation:
portrait) {
body {
/*rot*/
background-color: #c65324;
color: #000000;;
}
}
4.4.4 Vererbung und Kaskaden
Im Grunde genommen ist eine HTML-Datei nichts anderes als
eine hierarchische Verschachtelung von HTML-Elementen. Lädt
nun ein Browser einen Quelltext ein, verschafft er sich als Erstes
einen Überblick über diese Hierarchie, die auch Document Object
Model ( DOM) genannt wird. Die durch das Document Object
Model gebildetet Hierarchie ist eine wesentliche Voraussetzung
für Vererbung (Abb. 4.4.4a).
TECHNISCHE
GRUNDLAGEN
Abb. 4.4.3g-j: Auswirkungen der CSS Media
Queries
4
79