<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
padding: 20px;
font-size: 24px;
}
/* Above 801px this will take action */
@media screen and (min-width: 801px) {
.example {
background-color: lightgrey;
color:#000;
}
}
/* Between 800px - 600px this will take action */
@media screen and (max-width: 800px) {
.example {
background-color:#0099CC;
color:#FFF;
}
}
/* Less 600px this will take action */
@media screen and (max-width: 600px) {
.example {
background-color:#CCFF66;
color:#000;
}
}
</style>
</head>
<body onresize="document.getElementById('winWidth').innerHTML = window.innerWidth;">
<div class="example">Window width: <span id="winWidth"></span></div>
<script>
document.getElementById('winWidth').innerHTML = window.innerWidth;
</script>
</body>
</html>