| 

.NET C# Java Javascript Exception

3
Eine interessante Möglichkeit, die Anzeige von Webseiten auf unterschiedlichen Geräten flexibel zu handhaben, scheint die CSS-Erweiterung unter dem Namen Media Queries zu sein. Ich finde die Syntax der möglichen Ausdrücke allerdings ziemlich verwirrend. Gibt es da eine Quelle, die leichter lesbar ist als diese sperrigen akademischen W3C-Dokumente?
News:
02.05.2012
killerkram 11 2
1 Antwort
2
Ich empfehl dir die Frage Bildschirmgröße und Auflösung für eine Website wo das Thema Media Querys mit vielen Beispielen, Bildern und Links bereits erörtert wurde.

Hier nochmal ne kurze Zusammenfassung:

Beispiel mit Erklärung wie man CSS-Files abhänging von Media-Querys läd:

<!-- Standard CSS File mit allen wesentlichen Regeln (z.B. H1, TABLE, ...) -->
<link href="base.css" type="text/css" rel="stylesheet" media="screen" />

<!-- CSS-File was nur bei Bildschirmen mit einen größen zwischen 320 und 760px geladen wird -->
<link href="mobile.css" type="text/css" rel="stylesheet"
media="screen and (min-width:320px) and (max-width:760px)" />

<!--CSS-File was bei Bildschirmen ab 760px geladen wird-->
<link href="desktop.css" type="text/css" rel="stylesheet"
media="screen and (min-width:760px)" />


Beispiel für CSS-Regeln die anhand von Media-Querys aktiviert werden:

@media screen and (min-width:320px) and (max-width:760px) {
H1 {
font-size: 120%;
}
}


Gute Artikel zu dem Thema:

Responsive Webdesign mit HTML5 und CSS3 – Grundlagen
Geräteabhängige Stilvorgaben mit CSS Media Queries
Media Queries - CSS Beispiel - CSS3
02.05.2012
Floyd 14,6k 3 9
Floyd 14,6k 3 9

Stelle deine Web-Frage jetzt!