A Quick Look At Media Queries and How To Use Them

Responsive Web Design

Media queries are an excellent way to deliver different styles to different devices.

The rapid growth of mobile devices has made it a challenge for web designers to ensure that their websites look good not only on a big screen, but also on the smallest of phones and everything in between. Users no longer view web content only on traditional desktop computers, but are increasingly using smartphones, tablets, and other devices with a wide range of dimensions.

Media queries look at the capability of the device, and can be used to check many things, such as:

  • Width and height of the viewport
  • Width and height of the device
  • Orientation (Landscape or Portrait)
  • Resolution

Examples

Want to learn how to implement media queries? Take a look at the following examples.

Max Width
The following CSS will apply if the viewing area is smaller than 770px. (View In Action)

@media screen and (max-width: 770px) {
  .myclass {
    background: #000;
  }
}

Min Width
The following CSS will apply if the viewing area is greater than 1025px.

@media screen and (min-width: 1025px) {
  .myclass {
    background: #000;
  }
}

Combine Multiple Media Queries
The following code will apply if the viewing area is between 400px and 600px.

@media screen and (min-width: 400px) and (max-width: 600px) {
  .myclass {
    background: #000;
  }
}

Device Width
The following code will apply if the max-device-width is 667px (eg. iPhone 6 Landscape Width).

@media screen and (max-device-width: 667px) {
  .myclass {
    background: #000;
  }
}

Linking To A Different Style Sheet
This will apply a different style sheet depending on set device width.

<link rel="stylesheet" media="screen and (max-width: 667px)" href="smallerdevice.css">

Useful Links