Media-Queries - Von Ihrem Browser unterstützt

Abfrage der Breite in Pixel:

Untenstehend wird angezeigt, welche Mediaquery greift.

Ausprobieren durch verkleinern des Browser-Fensters!

>480 >800 >1024 >1600 >1920


Beispielanwendung:

Bei dieser kleinen Beispielanwendung, soll sich bei einer Breite unter 1024px das 3-spaltige Layout in ein 2-spaltiges ändern. Unter einer Breite von 800px wird ein 1-spaltiges Layout angezeigt.

Ausprobieren durch verkleinern des Browser-Fensters!


Kopf
Inhalt
Leiste 1
Leiste 2
			
<!-- html -->
<section id='kopf' >Kopf</section>
<section id='inhalt' >Inhalt</section>
<section id='sideBar1' >Leiste 1</section>
<section id='sideBar2' >Leiste 2</section>
			
		
			
/* CSS gekürzt (section-Elemente sind gefloated) */	

/* Standard-Ansicht*/		
#kopf {
	width:620px;
}
#inhalt {
	width:400px;
}
#sideBar1 {
	width:100px; 
	margin:0 10px;
}
#sideBar2 {
	width:100px;
}		


/*Kleiner als 1024px*/
@media screen and (max-width: 1024px){
	#kopf {
		width:280px;
	}
	#inhalt {
		width:180px;
	}
	#sideBar1 {
		width:90px; 
		margin:0 0 0 10px;
	}
	#sideBar2 {
		width:280px; 
		margin:10px 0 0 0;
	}	
}

/*Kleiner als 800px*/
@media screen and (max-width: 800px){
	#kopf {
		width:150px; 
		margin:0;
	}
	#inhalt {
		width:150px; 
		margin:10px 0 0 0;
	}
	#sideBar1 {
		width:150px; 
		margin:10px 0 0 0;
	}
	#sideBar2 {
		width:150px; 
		margin:10px 0 0 0;
	}
}
		
		

Browserunterstützung

  • IE9
  • FF3.6
  • Chrome19
  • Opera 12
  • Safari 5.1
  • Safari IOS 3.2
  • Android Browser 2.1