Um Webseiten responsiv zu gestalten, ist es manchmal notwendig Elemente nach der Bildschirmauflösung ein bzw. auszublenden.
Nehmen wir folgende Seite an:
Der Header ist eine recht breite Grafik, welche am Desktop-Browser ohne Probleme dargestellt wird.
Auf kleinen Geräten mit weniger großen Bildschirmen, passt die Grafik nicht mehr. Daher blenden wir hier eine andere Grafik ein und die ursprüngliche aus:
CSS-Eigenschaften welche von der Bildschirmgröße abhängen, sind leicht zu realisieren. Im Beispiel ist unser CSS so definiert:
<style type="text/css">
/* Landscape phones and down */
@media (max-width: 600px) {
.bigheader {
display: none;
}
}
@media (min-width: 600px) {
.smallheader {
display: none;
}
}
</style>
Stehen weniger als 600 Pixel zur Verfügung, wird der große Header ausgeblendet und der kleine eingeblendet. Es lassen sich beliebig viele Breiten angeben, jeweils als min-width oder max-width und natürlich lassen sich beliebige CSS-Eigenschaften definieren, nicht nur die hier gezeigten.
Man muss nur darauf achten, dass man keine widersprüchlichen Definitionen anlegt.
Die Anwendung der CSS-Eigenschaften ist dann ebenfalls recht einfach:
<div class="bigheader"> <img src="header.png" width="1340" height="136"> </a> </div> <div class="smallheader"> <img src="header_sm.png" width="600" height="136"> </a> </div>
Dem jeweiligen Element wird einfach die CSS-Klasse zugewiesen.
