Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (min-width: 200px) {
body {
background-color: #51d675;
}
}
@media screen and (min-width: 600px) {
body {
background-color: #ccc;
}
}
@media screen and (max-width: 800px) and (min-width: 500px),
(min-width: 1000px) {
div.box {
font-size: 40px;
padding: 50px;
border: 6px solid #000;
background: #eee;
}
}
</style>
</head>
<body>
<p>
To see the effect, resize the browser window.
</p>
<p>
Change the appearance of the DIV on different screen sizes.
</p>