Responsive Web Design: Media Queries

Internet's universe...There are thousands of devices on which people browse the web. Can they access and view your site, regardless of whether they are on a laptop, an iPhone 5 or a Galaxy S4 Mini? That’s the question. As we turn to our devices more and more, we need sites that respond and provide optimal experiences. Responsive web design allows us to do that. A site will respond as effectively to our 4 inch phone screen as it does to our 15 inch desktop screen. Last time, we talked about fluid grids, one of the building blocks of responsive web design. Now we’ll turn out attention to media queries, another essential element of a responsive website.

To quickly recap, a fluid grid enables elements of a website to adjust proportionally to screen sizes. The second element is CSS3 media queries. These allow you to collect data from site visitors and use that to “respond” to CSS styles. It determines which style will be used based on the dimensions of the viewing device (among other criteria, such as resolution).

Let’s put this into action. Say we want to target tablets with a maximum screen resolution of 560 px (such as a tablet). Our media query would look like this:

<link rel=”stylesheet” media=”screen and (min-width:320px) and (max-width:480px)” href=”css/mobile.css” />

Or, if you are writing it directly in a stylesheet:

1 @media screen and (min-width:320px) and (max-width:480px){
2
3 /*Style Declarations For This Width Range */
4
5 }

Because you want your site to be responsive to a wide variety of devices, you will enable various pixel increments, such as 480, 600, 768, 992, and 1382. As with implementing fluid grids, there are tools that can help you develop media queries for responsive web design. These include:

  •  Bootstrap.
  • The Responsive Calculator.
  • Adapt.JS.
  • Rock Hammer.
  • Skeleton.

These tools make it easier to implement responsive web design.Fluid grids and media queries are central to this mission, and tools, like Bootstrap, offer a solution for building both into your website. Responsive web design ensures users can view your site regardless of device; if you’re not responsive, you need to get on it!

Leave a Comment