eKiwi

HTML Elemente responsiv ausblenden und größenabhängige CSS Anpassungen

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.


Copyright Dunkel & Iwer GbR - Alle Rechte vorbehalten