Css media queries

Css media queries czyli zapytania mediów pozwalają dopasować style css do typu mediów (np. print lub screen) oraz cech urządzenia np. rozdzielczości ekranu. Omówię czym są media queries oraz na koniec pokażę przykład zastosowania. Będzie to fragment mojego dema z Dev Derby.

Wstawianie css media queries

Zapytania mediów można wstawić na trzy sposoby. Pierwszy to targetowanie zewnętrznego arkusza stylów.

<link rel="stylesheet" type="text/css" href="small.css" media="only screen and (max-width: 800px)" />

Importowanie pliku css w elemencie style.

<style type="text/css">
@import "small.css" only screen and (max-width: 800px);
</style>

Reguła media w kodzie css.

@media only screen and (max-width: 800px) {
	
}

Css media queries features

Omówię teraz krótko jakie mamy możliwości wykrywania różnych właściwości związanych z mediami. Poniższa lista przedstawia właściwości (features), które możemy wykorzystywać w zapytaniach mediów (media queries):

width (max-width, min-width) - szerokość okna przeglądarki
height (max-height, min-height) - wysokość okna przeglądarki
device-width (max-device-width, min-device-width) - szerokość urządzenia
device-height (max-device-height, min-device-height) - wysokość urządzenia
orientation (landscape lub portrait) - orientacja urządzenia
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
color (min-color, max-color) - ilość bitów na składnik koloru urządzenia
color-index (min-color-index, max-color-index)
monochrome
resolution
scan (progressive lub interlace)
grid (1 lub 0)

Css media queries - przykład

Czas na praktyczny przykład wykorzystania. Będziemy dodawać/usuwać w zależności od szerokości okna przeglądarki elementy tęczy. Najpierw przygotujmy dokument html. Wewnątrz body wstawiamy kilka divów - jeden z logo, jeden z chmurkami, a reszta z poszczególnymi elementami tęczy.

<!doctype html>
<html>
	<title>Css3 media queries</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<body style="background:black;">
		<div id="rainbow">
		<div id="red"></div>
		<div id="orange"></div>
		<div id="yellow"></div>
		<div id="green"></div>
		<div id="blue"></div>
		<div id="clouds"></div>
		<div id="logo"></div>
		</div>
	</body>
</html>

Teraz napiszmy kod css.

html, body {
	margin:0;
	padding:0;
}
#obrazek {
	position:absolute;
}
#rainbow {
	position:relative;
	width:416px;
	height:400px;
	top: 10%;
	margin:0 auto;
}
#clouds {
	background: transparent url("img/clouds.png") no-repeat;
	width:416px;
	height:100px;
	position:absolute;
	bottom:0;
}
#red {
	background: transparent url("img/rainbow_red.png") no-repeat;
	width:325px;
	height: 165px;
	bottom: 70px;
	left: 45px;
	position:absolute;
	visibility:visible;
	opacity:1;
}
#orange {
	background: transparent url("img/rainbow_orange.png") no-repeat;
	width:325px;
	height: 165px;
	bottom: 70px;
	left: 45px;
	position:absolute;
	visibility:visible;
	opacity:1;
}
#yellow {
	background: transparent url("img/rainbow_yellow.png") no-repeat;
	width:325px;
	height: 165px;
	bottom: 70px;
	left: 45px;
	position:absolute;
	visibility:visible;
	opacity:1;
}
#green {
	background: transparent url("img/rainbow_green.png") no-repeat;
	width:325px;
	height: 165px;
	bottom: 70px;
	left: 45px;
	position:absolute;
	visibility:visible;
	opacity:1;
}
#blue {
	background: transparent url("img/rainbow_blue.png") no-repeat;
	width:325px;
	height: 165px;
	bottom: 70px;
	left: 45px;
	position:absolute;
	visibility:visible;
	opacity:1;
}
#logo {
	background: transparent url("img/logo.png") no-repeat;
	width:236px;
	height: 72px;
	bottom: 90px;
	left: 85px;
	position:absolute;
}
@media only screen and (max-width: 1200px) {
	#red { visibility:hidden;opacity:0; }
}
@media only screen and (max-width: 1000px) {
	#orange { visibility:hidden;opacity:0;  }
}
@media only screen and (max-width: 800px) {
	#yellow { visibility:hidden;opacity:0;  }
}
@media only screen and (max-width: 600px) {
	#green { visibility:hidden;opacity:0;  }
}
@media only screen and (max-width: 500px) {
	#blue { visibility:hidden;opacity:0;  }
	#logo { background: transparent url("img/logo2.png") no-repeat; }
}		
* {
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-webkit-transition: all 1s linear;
	transition: all 1s linear;
}

Najpierw stylujemy standardowo poszczególne elementy. Nowością są tylko linijki zaczynające się od @media. Odpowoadają za zachowanie elementów przy zmianie rozdzielczości ekranu np. poniższy kod ukrywa warstwę z czerwonym elementem tęczy jeśli szerokość jest mniejsza lub równa 1200px.

@media only screen and (max-width: 1200px) {
	#red { visibility:hidden;opacity:0; }
}