FREE HTML5 AND CSS3 TEMPLATES / OPEN SOURCE LEARNING

einfaches Media Query Beispiel mit Viewport Meta-Tag

Diese Box wird schwarz mit weisser Schrift wenn der sichbare Bereich grösser als 900px ist.

Diese Box ist pink wenn der sichbare Bereich zwischen 600px und 900px liegt.

Diese Box wird aqua wenn der sichbare Bereich kleiner als 600px ist.

Diese Box wird nur auf Geräten mit einer maximalen Bildschirmgrösse von 480px angezeigt

Die Bildschirmgrösse ist zur Zeit: kleiner als 600px zwischen 600 - 900px grösser als 900px

@media screen and (min-width: 900px) {
	body{
	background-color:#bbb;
	}
	.eins { 
	background: #000;
	color:#fff;
	height:200px;
	 }
	
	span.gr900 {display: inline-block;}
}

@media screen and (min-width: 600px) and (max-width: 900px) {
	
	.zwei {
	background: #f67;
	height:200px;
	}
	span.zw600-900 { display: inline-block; }
}

@media screen and (max-width: 600px) {
	.drei {
	background: #0ff;
	height:200px;
	}
	span.k600 {display: inline-block;}
}

@media screen and (max-device-width: 480px) {
	.iphone {
	background: #eee;
	display:block;
	}
}