Testing media queries

by leaverou

HTML

<p>Resize this window to see media queries in action</p>

CSS

body { color: white; background: gray; font-size: .5in }

@media screen and (min-width: 1024px){
    body { background: red; }
}

@media screen and (min-width: 641px) and (max-width: 1023px){
    body { background: yellow; }
}

@media screen and (max-width: 640px){
    body { background: green; }
}