Media queries test

by Vladimir

HTML

<div id="block">
    <div id="w1200">More then 1200px</div>
    <div id="w1024">More then 1024px</div>
    <div id="w980">More then 970px</div>
    <div id="w800">More then 800px</div>
    <div id="w600">More then 600px</div>
    <div id="w480">More then 480px</div>
</div>

CSS

#block div {
    display: none;
}
@media (min-width: 1200px) {
	#block #w1200 {
		display:block !important;
	}
}
@media (min-width: 1024px) {
	#block #w1024 {
		display:block !important;
	}
}
@media (min-width: 970px) {
	#block #w980 {
		display:block !important;
	}
}
@media (min-width: 800px) {
	#block #w800 {
		display:block !important;
	}
}
@media (min-width: 600px) {
	#block #w600 {
		display:block;
	}
}
@media (min-width: 480px) {
	#block #w480 {
		display:block;
	}
}

JavaScript

document.write(navigator.userAgent)