ftonato/basic-media-query.html

## basic-media-query.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Basic Media Query</title>

	<style>

		.title {
			color: #222;
		}

		.first, .second, .third, .fourth {
			display: none;
		}

		@media screen and (max-width: 400px) {
			body {
				background-color: #f1c40f;
			}
			.first {
				display: block;
			}
		}

		@media screen and (min-width: 301px) and (max-width: 600px) {
			body {
				background-color: #e67e22;
			}
			.first {
				display: none;
			}
			.second {
				display: block;
			}
		}

		@media screen and (min-width: 601px) {
			body {
				background-color: #e74c3c;
			}
			.third {
				display: block;
			}
		}

		@media screen and (min-width: 961px) {
			body {
				background-color: #9b59b6;
			}
			.third {
				display: none;
			}
			.fourth {
				display: block;
			}
		}
	</style>

</head>
<body>

	<h1 class="title first">width &lt;= 400px</h1>
	<h1 class="title second">width &gt;= 300px and width &lt;= 600px</h1>
	<h1 class="title third">width &gt;= 601px</h1>
	<h1 class="title fourth">width &gt;= 961px</h1>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Basic Media Query</title>

	<style>

	.title {
	color: #222;
	}

	.first, .second, .third, .fourth {
	display: none;
	}

	@media screen and (max-width: 400px) {
	body {
	background-color: #f1c40f;
	}
	.first {
	display: block;
	}
	}

	@media screen and (min-width: 301px) and (max-width: 600px) {
	body {
	background-color: #e67e22;
	}
	.first {
	display: none;
	}
	.second {
	display: block;
	}
	}

	@media screen and (min-width: 601px) {
	body {
	background-color: #e74c3c;
	}
	.third {
	display: block;
	}
	}

	@media screen and (min-width: 961px) {
	body {
	background-color: #9b59b6;
	}
	.third {
	display: none;
	}
	.fourth {
	display: block;
	}
	}
	</style>

	</head>
	<body>

	<h1 class="title first">width <= 400px</h1>
	<h1 class="title second">width >= 300px and width <= 600px</h1>
	<h1 class="title third">width >= 601px</h1>
	<h1 class="title fourth">width >= 961px</h1>

	</body>
	</html>