Media Queries - CSS

using css to show or hide content dependant upon screen size.

by vincentieo

HTML

<div id="content">
    <div id="header" class="large">
        Screen is 760px or Higher - <span>LARGE</span>
    </div>
    
    <div id="header" class="medium">
        Screen is 480px - 760px - <span>MEDIUM</span>
    </div>

    <div id="header" class="small">
        Screen is 480px or Lower -- <span>SMALL</span>
    </div>
</div>

<a href="http://jsfiddle.net/vincentieo/FEyZf/embedded/result/" target="_blank"><button>Full Screen Example</button></a>


<p><------- Rezixe Me -------></p>

CSS

.large
{
	 display: block;
}
.medium
{
	 display: none;
}
.small
{
	 display: none;
}

@media screen and (max-width: 768px)  
{		
	 .large /* LARGE */
	 {
	 	 display: block;
	 }
	 
	 .medium
	 {
	 	 display: none;
	 }

	 .small
	 {
	 	 display: none;
	 }
}

@media screen and (max-width: 768px)  
{		
	 .large
	 {
	 	 display: none;
	 }
	 
	 .medium  /* Medium */
	 {
	 	 display: block;
	 }

	 .small  
	 {
	 	 display: none;
	 }
}

@media screen and (max-width: 480px)  
{		
	 .large
	 {
	 	 display: none;
	 }
	 
	 .medium
	 {
	 	 display: none;
	 }

	 .small  /* LARGE */
	 {
	 	 display: block;
	 }
}


/* color styles */
#content {background-color: #82b6f8; padding: 20px; color: #6b4b38;}

span { background-color: #5375a0; padding: 5px; }

.large span {
     color: #fe84d2;   
}
.medium span {
     color: #cc82f8;  
}
.small span {
     color: #9082f8;   
}

JavaScript

// No JavaScript Needed