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...



The anatomy of a CSS Media Query and more…

time to read: 2 min