media queries - change color on screen size

change the css property of an object using class, dependant on the screen size

by vincentieo

HTML

<div id="grid">
    <h1>Resize the window to see a change in color</h1>
</div>

CSS

h1 {padding: 10px;}

#grid {
	height: 100%;
    width:100%;
    background-color: #549cd8;
	 }

@media screen and (max-width: 768px)  
{		
	 #grid {
	 	background-color: #54d8b5;
	 }
}

@media screen and (max-width: 420px)  
{		
	 #grid {
	 	background-color: #7bde56;
	 }
}

JavaScript

// None Needed