Media Queries, making responsive web-pages

Media query's were introduced in CSS3 to help developers make rules of CSS properties only if a certain condition is true.
They can be used to check many things, such as:
width and height of the viewport, width and height of the device, orientation (if landscape or portrait), resolution and so on.
An example of a media query:
@media all and (min-width: 320px) and (max-width: 1024px){
 body {
    background: pink;
 }
}

You can even call an stylesheet using media query's:
<link media='screen and (min-width: 320px) and (max-width: 1024px)' rel='stylesheet' href='/style.css' />
Very important is for you not to forget the responsive meta tag if you are coding a responsive website.
What this does is to tell the user browser that the zoom level (initial-scale) when the page is first loaded should be 1 and that the width value (device-width) of the screen is at a scale of 100%.
<meta name="viewport" content="width=device-width, initial-scale=1"/>

Mosed common structure for media is:
@media all and (max-width: 480px) { /* smartphones*/ }
@media all and (max-width: 640px) { /* smartphones, tablets, portrait and landscape*/ }
@media all and (max-width: 960px) { /* smartphones, tablets, portrait and landscape */ }
@media all and (max-width: 1024px) { /* tablets, laptops, desktops */ }
@media all and (max-width: 1280px) { /* laptops, desktops */ }
@media all and (min-width: 1281px) { /* hi-resolution */ }