Geräteweiche - Device switch

iPad

	@media only screen and (device-width: 768px) {
		/* For general iPad layouts */
	}

	@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
		/* For portrait layouts only *
	}

	@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
		/* For landscape layouts only */
	}

iPad und iPhone

	@media only screen and (device-width: 768px), only screen and (max-device-width: 480px) {
		/* Styles */
	}

Media Queries

Quellen: Webdesignerwall Tutorial, Webdesignerwall Demo

	/* only for viewing areas smaller than 601px */
	@media screen and (max-width: 600px) {
	  .class {
		background: #ccc;
	  }
	}
	/* only for viewing areas between 600px and 900px */
	@media screen and (min-width: 600px) and (max-width: 900px) {
	  .class {
		background: #333;
	  }
	}
	/* iPhone Display */
	@media screen and (max-device-width: 480px) {
	  .class {
		background: #000;
	  }
	}

iPhone 4

	<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

iPad

	<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
	<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Media Queries

Quelle: Stuff and Nonsense

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen 
	and (min-device-width : 320px) 
	and (max-device-width : 480px) {
	/* Styles */
	}

	/* Smartphones (landscape) ----------- */
	@media only screen 
	and (min-width : 321px) {
	/* Styles */
	}

	/* Smartphones (portrait) ----------- */
	@media only screen 
	and (max-width : 320px) {
	/* Styles */
	}

	/* iPads (portrait and landscape) ----------- */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) {
	/* Styles */
	}

	/* iPads (landscape) ----------- */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : landscape) {
	/* Styles */
	}

	/* iPads (portrait) ----------- */
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : portrait) {
	/* Styles */
	}

	/* Desktops and laptops ----------- */
	@media only screen 
	and (min-width : 1224px) {
	/* Styles */
	}

	/* Large screens ----------- */
	@media only screen 
	and (min-width : 1824px) {
	/* Styles */
	}

	/* iPhone 4 ----------- */
	@media
	only screen and (-webkit-min-device-pixel-ratio : 1.5),
	only screen and (min-device-pixel-ratio : 1.5) {
	/* Styles */
	}

Of course, you might not want all your responsive design styles inside one huge stylesheet. If that’s the case, you can serve alternative stylesheets using the same queries as attributes on your link elements.

	<link rel="stylesheet" href="smartphone.css" 
	media="only screen and (min-device-width : 320px) 
	and (max-device-width : 480px)">

	<link rel="stylesheet" href="smartphone-landscape.css" 
	media="only screen and (min-width : 321px)">

	<link rel="stylesheet" href="smartphone-portrait.css" 
	media="only screen and (max-width : 320px)">

	<link rel="stylesheet" href="ipad.css" 
	media="only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px)">

	<link rel="stylesheet" href="ipad-landscape.css" 
	media="only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : landscape)">

	<link rel="stylesheet" href="ipad-portrait.css" 
	media="only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : portrait)">

	<link rel="stylesheet" href="widescreen.css" 
	media="only screen and (min-width : 1824px)">

	<link rel="stylesheet" href="iphone4.css" 
	media="only screen 
	and (-webkit-min-device-pixel-ratio : 1.5), 
	only screen and (min-device-pixel-ratio : 1.5)">

Wiki-Datei des Artikels herunterladen