Schlagwort-Archive: Stylesheet

Responsive Webdesign mit CSS Media Queries

Damit eine Webseite auf jedem Endgerät gut lesbar bzw. benutzbar ist solle man heutzutage ein „Responsive Design“ für seine Webseite benutzen. So ein Resonsive Design setzt man am besten mit „CSS Media Queries“ um. Mit diesen Media Queries kann man via CSS festlegen was bei verschiedenen Bildschirmgrössen mit der Webseite passieren soll. Man verschachtelt sozusagen seinen CSS Code in mehrere Bereiche. Als erstes schreibt man die allgemeinen Formate welche immer gelten und danach erstellt man die Media Queries wobei jedes Query für ein Endgerät bzw. eine Bildschirmgrösse. Man muss nicht unbedingt alle Queries anwenden, wie und in welchem Umfang man das macht muss jeder für sich selbst bzw. für seine Webseite herausfinden.

Es gibt folgende Arten von Media Queries:

device-width:
/* Breite des Bildschirms eines Endgerätes */
@media screen and (device-width: 640px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

device-height:
/* Höhe des Bildschirms eines Endgerätes */
@media screen and (device-height: 480px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

width:
/* Breite des Browserfensters eines Endgerätes */
@media screen and (min-width: 640px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

height:
/* Höhe des Browserfensters eines Endgerätes */
@media screen and (max-height: 480px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

orientation:
/* Haltung des Endgerätes, Querformat (landscape) oder Hochformat (portrait) */
@media all and (orientation: landscape) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

print:
/* Dieses Media Query ist für die Formatierung der Druckansicht */
@media print {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

 
Es gibt natürlich noch jede Menge andere verschiedene Queries aber ich denke dies sind die wichtigsten die Ihr braucht. Ich persöhnlich verwende lediglich zwei von den oben angezeigten Media Queries, aber wie schon gesagt, dies muss jeder für sich selbst herausfinden. Hier habt ihr eine Liste aller Queries, es wird euch bei dieser Liste auch gleich angezeigt ob der Browser den Ihr gerade verwendet die Queries unterstützt oder nicht.
Übersicht CSS Media Queries
 
Man kann die Queries auch miteinander sozusagen Verknüpfen mit Hilfe einer „and“ Anweisung.
Folgendes Beispiel steht für ein iPad im „Landscape“ Modus:
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation: landscape){
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

 
Es gibt bei GitHub eine schöne Template Vorlage wo einige Endgeräte sozusagen vordefiniert sind. Natürlich müsst ihr die Formate selbst passend für eure Webseite in die Queries einfügen aber wenigstens müsst Ihr euch dann um die definition der Queries für die einzelnen Endgeräte nicht mehr kümmern.
GitHub CSS3 Media Queries Template
 
So das reicht erstmal denke ich, ich hoffe Ihr konntet alles verstehen und umsetzen. Bei Fragen oder Anregungen zu diesem Tutorial hinterlasst einfach unten unter dem Tutorial einen Kommentar oder eröffnet ein Thema im Forum wenn Ihr eine Diskussion darüber starten wollt.
Viel Spass beim nachmachen und austesten.