<!doctype html>
<html lang="pl-pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<title>Responsywna strona internetowa</title>
<style>
.wrapper {
	margin: 0 auto;
	width: 840px;
}

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

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.wrapper {
		width: 696px;
	}
}

@media only screen and (max-width: 767px) {
	.wrapper {
		width: 264px;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.wrapper {
		width: 408px;
	}
}
</style>
</head>
<body>
	<div class="wrapper">
		<h1>Responsywna strona internetowa</h1>
		<p>Technika projektowania stron internetowych, tak aby ich wygląd
		i układ dostosowywał się automatycznie do rozmiaru okna urządzenia,
		na którym jest wyświetlana np. dużym ekrnie komputera,
		smartfonie czy tablecie.</p>
	</div>
</body>
</html>