This element will be red if your web browser window is wider than 1000 pixels.

It will be blue if the web browser window is between 400 and 1000 pixels.

If the web browser window width is lower than 400 pixels, it will be green.

This device's rotation is (not-detected)portraitlandscape

Code used in this page

.media-query-elm {
	width: 300px;
	height: 200px;
	margin-bottom: 20px;
	padding: 10px;
	color: #fff;
	background: #f00;
}

@media screen and (min-width: 400px) and (max-width: 1000px) {
	.media-query-elm {
		background: #00f;
	}
}

@media screen and (max-width: 399px) {
	.media-query-elm {
		color: #000;
		background: #0f0;
	}
}

.orientation {
	width: 300px;
	height: 200px;
	padding: 10px;
	margin-bottom: 20px;
	border: 2px solid #800040;
}

.portrait,
.landscape {
	display: none;
}

@media screen and (orientation: portrait) {
	.portrait {
		display: inline;
	}
	.not-detected {
		display: none;
	}
}

@media screen and (orientation: landscape) {
	.landscape {
		display: inline;
	}
	.not-detected {
		display: none;
	}
}