I think this is what you're tyring to do. I start with xs mobile as the default and work my way up to the larger devices.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Media Queries</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/**Default Rules for all, xs first**/
body {
margin: 0 auto;
width: 80%;
font-family:
Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
font-size: calc(16px + 1vw);
line-height: calc(1.1em + 0.5vw);
color:#555;
background:white;
}
/* Special Rules for sm */
@media only screen and (min-width: 576px) {
body {background: red; color:white}
}
/* Special Rules for md */
@media only screen and (min-width: 768px) {
body {background:blue;}
}
/* Special Rules for lg */
@media only screen and (min-width: 992px) {
body {background:goldenrod;}
}
/* Special Rules for xlg */
@media only screen and (min-width:1200px) {
body {background:green;}
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laboriosam voluptates recusandae quibusdam repudiandae provident expedita voluptatibus, blanditiis doloribus ratione iusto consequatur dicta repellendus maxime cvm, aliquid perferendis magna.</p>
</body>
</html>
AdChoices