Responsive Web Design - CSS Media Queries

We have already learned CSS3 Media Queries, but the next section requires the knowledge of Media Queries, let's go through it again as remainder.

Before its release, developers have to code separately for different devices like desktop, iphone, etc.

With CSS3 Media Queries, certain rules can be applied to specific HTML elements with which the web page can be made fluid.

Thanks to that, separate designs are no longer required, a single design will adjust itself for all devices.

In the below example, the HTML element with Id buy_now will disappear if the browser window size is in the range between 50px and 780px.

@media only screen and (min-width : 50px) and (max-width : 780px)
{
 #buy_now 
 {
  		  display:none; 
 }
}