CSS3 Media Queries, CSS3 Media Queries with Examples

<!DOCTYPE html>
<html>
	<head>
    	<title>CSS3 Media Queries</title>
    </head>
    <body>
    	
        <style type="text/css">
			/* Smartphones (portrait and landscape) ---------- */
			   @media screen and (min-width: 320px) and (max-width: 480px){
				  body{
				     background: #990;
				  }
				}
			/* Smartphones (portrait) ---------- */
				@media screen and (max-width: 320px){
				  body{
				     background: #09F;
				  }
				}
			/* Smartphones (landscape) ---------- */
				@media screen and (min-width: 321px){
				  body{
				     background: #F3C;
				   }
				 }
			/* tablets, iPads (portrait and landscape) ---------- */
				@media screen and (min-width: 768px) and (max-width: 1024px){
				   body{
				      background: #C00;
				   }
				}
			/* tablets, iPads (portrait) ---------- */
				@media screen and (min-width: 768px){
				   body{
				      background: #CC0;
				   }
				}
			/* tablets, iPads (landscape) ---------- */
				@media screen and (min-width: 1024px){
				   body{
				     background: #6C0;
				   }
				}
			/* Desktops and laptops ---------- */
				@media screen and (min-width: 1224px){
				  body{
				     background: #F90;
				  }
				}
			/* Large screens ---------- */
				@media screen and (min-width: 1824px){
				  body{
				    background: #3FF;
				  }
				}
				
        </style>
		
		<h1>CSS3 Media Queries</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

</body>
</html>

Output :

Topic : Media Queries