CSS3 Media Queries

Practical use case

Scalable Images

Bird
body{font-family:verdana, sans-serif;font-size:11px;} h1{text-shadow: 2px 2px 2px #ccc;} .clr{clear:both;display:block;margin-top:100px;} /*************** Practical use case: ***************/ .box { width: 100%; height: 50px; background: #cc0066; margin-right: 80px; float: left; } @media screen and (max-width : 400px) { .box { width: 100%; float: none; margin-bottom: 40px; background-color:green; } } /*************** Scalable images: ***************/ .media-resize { width:20%; } .media-resize img { max-width: 200%; }