The anatomy of a CSS Media Query and more…

Intro

A CSS Media Query is a CSS rule that lets you specify a particular device and apply specific styles to it. Media queries are a fundamental CSS rule for anyone concerned with responsive design. They allow you the freedom to redesign your interface for various devices.

 

For example

Say you want your website to have a green background on your laptop, but a blue background on your tabletand a red background on your mobile you could achieve this using a CSS Media Query.
Here’s how it might look:
@media only screen 

   and (min-width : 320px) {

   background-color: red;

}




@media only screen 

   and (min-width : 768px) {

   background-color: blue;

}




@media only screen 

   and (min-width : 1200px) {

   background-color: green;

}

The @media selector above tells the CSS ‘Ok we’re about to make some CSS rules for a particular media device’ . The ‘only’ makes the CSS exclusive to the parameters that are about to be specified. Screen means we are targeting a screen as our media device
and min-width means that on top of the other conditions that have been specified previously, the device must also be the min-width specified or wider in order for the CSS styles to be applied to the device you are targeting.
Media queries let you check your device for things like:
  1. Width / Height of your Device
  2. Width / Height of the viewport window
  3. Orientation – Portrait / Landscape
  4. Screen resolution
  5. Aspect Ratio

 

You can also create media queries using Javascript using the following:
var mq = window.matchMedia( "(min-width: 500px)" );


if (mq.matches) {

 // window width is at least 500px

} else {

 // window width is less than 500px

}


…Or through jQuery:
if($(window).width < 725 || Modernizr.touch) {

  // Code for smaller screens...

}


Resources:
  1. https://css-tricks.com/snippets/css/retina-display-media-query/
  2. http://www.hongkiat.com/blog/css-retina-display/
  3. https://www.sitepoint.com/javascript-media-queries/
  4. http://simplecss.eu
  5. http://cssmediaqueries.com/what-are-css-media-queries.html