Basics of Responsive Design: Using Media Queries

What is responsive design?

Responsive design is a method of designing websites so that they scale across a wide range of devices and viewport sizes. The idea behind using responsive techniques is “Build once, work everywhere”. Responsive design doesn’t mean you create separate designs for different devices. Instead, you create a single design that works well across multiple devices. Utilizing this approach will enable your site to be viewed on mobile, tablets and desktop browsers, while only requiring you to update and manage one site, instead of multiple iterations.

Responsive design incorporates the following types of design concepts:

  • Media queries
  • Fluid grids
  • Flexible images

Media queries are used to write css for specific situations. Fluid grids and flexible images are both based on using relative units for widths, instead of using pixels.

This is the first in a series on responsive design, and in this post we will concentrate on the basics of media queries, what they are and how we can use media queries to detect if a user is browsing from a mobile device vs a desktop, and set specific styles to accommodate the smaller screen size.

What are media queries?

Media queries can be set to detect such features as width, height, screen orientation, aspect-ratio and resolution. A full list, along with descriptions of each can be found on the W3C website at

For the purposes of this post, we will be addressing the most typically used media type: screen; as well as the most typically used features: max-width and min-width.

An example of a media query within a style sheet is:

@media screen and (min-width: 480px) and (max-width: 767px) {
#content {width: 480px;}

An @media rule specifies the target media types of a set of statements. Here we are specifying the media type “screen”. The max-width and min-width features, or breakpoints, are telling the browser that at any screen size larger than 480px, but smaller than 768, set the #content selector to a width of 480px.

What are the most common sizes, or break points, for media queries?

Setting up break points for media queries can be a daunting task. Just as there are a multitude of different size mobile and tablet devices, there are a multitude of different breakpoints you can use to target those devices. But breakpoints shouldn’t only be device specific, they should also be set up according to how the design dictates. Below are some common breakpoints:

/* Smartphones */
@media screen and (max-width: 479px) {
/* The styles for this breakpoint go here */

/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* The styles for this breakpoint go here */

/* Desktops and Laptops */
@media screen and (min-width: 1280px) {
/* The styles for this breakpoint go here */

You should always test your designs and breakpoints on devices and use what looks best for your design, as they may or may not coincide with specific device breakpoints.

Remember, we aren’t using media queries to create device specific designs. Instead we are creating one responsive design that scales. Responsive design responds to its environment, whether that be on a tablet, smartphone or desktop. Media queries are just one part of responsive design, and used in conjunction with flexible grids and fluid images, your website will be able to display well in any circumstance.

Coming soon: Basics of Responsive Design: Fluid Grids


[image: ThinkStockPhotos]