SO Retina display

http://bit.ly/10674ba

by panchroma

HTML

<!-- depending on the viewport, the h1 text changes from hello,  to hello world, to hello world text -->

<h1 class="small">Hello</h1>
<h1 class="med">Hello World</h1>
<h1 class="lge">Hello World Text!</h1>

CSS

@media (max-width: 210px){
 .small{
 display:inherit;
 }

 .med, .lge{
 display:none;
 }
}

@media (min-width: 211px) and (max-width: 270px){
.med{
 display:inherit;
 }

 .small, .lge{
 display:none;
 }
}

@media (min-width: 271px){
 .lge{
 display:inherit;
 }

 .small, .med{
 display:none;
 }
}

/* make sure initial-scale set to 1 for hand-held tests with jsFiddle */

</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>