Responsive Web Design: CSS3 Media Queries

I’m sure most people have already heard about the rise of responsive designs – especially if you’re interested in web design and development. Over the last few years, having a responsive website became an absolute must. The days when you had to drag and scroll your way around websites are over. Well, partially over – as there are still websites struggling to provide a decent user experience. In this article, we’re going to get familiar with the concept of responsive web design, and how to get started with creating responsive websites.

What is Responsive Web Design?

Content-is-like-water-1980

Image by: Stéphanie Walter (via Wiki Commons)

In today’s digital space, it’s impossible to keep up with all the different device resolutions. They’re just too many of them! So, should you just give up, focus on what you have and lose potential viewers from other devices? Of course not! This is where the concept of responsiveness comes into play. By using some cool CSS features, you’ll be able to make your website flexible to different resolutions and devices.

If you’re looking for a formal definition, you can think of responsive web design as an approach that developers use to create websites that automatically respond to different types of resolutions – depending on the browser’s window screen size, platform, orientation or behavior. This is possible through so called CSS media queries.

Note: Before we move into the next paragraph, it’s preferred if you have a basic understanding of HTML and CSS – as we’re going to demonstrate some examples.

Introduction to CSS3 Media Queries

CSS media queries allow you to use the same HTML elements on the page, but with different set of CSS rules – if the query applies. This allows you to create flexible layouts and change how things look in a given resolution range – using plain CSS. Before we demonstrate this with an example, let’s see how we can define a media query in a stylesheet.

Declaring a Media Query

Basic syntax for creating media query is:

@media mediatype and (media feature condition) {
/* Set of CSS rules */
}

There are several media types that you can use such as screen, print, speech, all, etc. And, there are more than 20 media features. Here’s the entire list. In order for one query to run, the media feature condition needs to be true. It’s the same logic when you’re using if and while conditionals in other programming languages. So, the set of CSS3 rules will apply in the stylesheet, once the media feature becomes true. Don’t worry if you’re confused, this will make a lot more sense later on.

For the purpose of this article, we’re going to use the most commonly used media types and features in web design.

Example

#primary {
background-color: white;
}

@media screen and (max-width: 960px) {

#primary {
background-color: black;
}

}

As you can see, we’ve set the media type to be screen. We’re targeting the visitor’s device screen that displays our website. For the media feature, we’ve set max-width to be 960 pixels. This means that in order for this query to run, the width of the visitor’s screen should be maximum 960 pixels or lower. Remember, max-width specifies the number of pixels the screen shouldn’t exceed.

Our goal with this query is to change the background color of our #primary div to black. Initially in our style.css, the value is set to white. If the screen of the device that’s viewing our website is 961px or larger, this media query won’t run. However, if the screen is anything under, or 960px precisely, you will notice that the background color is black. You can play with your browser’s width and see this in action.

Example 2

#primary {
background-color: white;
}

@media screen and (min-width: 960px) {

#primary {
background-color: black;
}

}

This example is pretty much the same with one exception: the media feature is now min-width: 960px. In order for this query to run, the screen’s width needs to be at least 960px or larger. This media feature is the opposite from max-width. So if our screen is say, 1600px, this media query will execute and the background color will be black.

You’re probably thinking right now… this CSS syntax is not as intuitive as it should be. You’re totally right!

What media feature to use and when: min-width vs max-width

These two seem way to similar. How can you decide which one to use in your media queries? To answer that, we’re going to have to consider the styles outside our media queries. We’re writing these media queries to change our default styles. Because of that, choosing between using min-width and max-width depends on the design flow and your styling approach. Here are some common situations:

  • Developers use min-width queries if they are writing the styles for mobile first. This means that the default styles before the media query are intended for mobile resolutions. Then, min-width queries are used to target larger resolutions and apply styles for larger screens.
  • Developers use max-width queries if they are writing styles for desktop first. Then, max-width queries are used to target lower screen sizes and make the website mobile-friendly.
  • Often times, these two are used to create a resolution range. For example, @media screen and (min-width: 1280px) and (max-width: 1600px), means that the query will apply to all resolutions between 1280 and 1600px. This is a mathematical equivalent to the following statement: 1280px >= X pixels in screen width <= 1920px.
  • In some cases, min and max width are combined in a different way. You may start with the desktop-first design, but you’ll need to specifically target Retina displays. So, you will use a query with min-width:2560px for Retina displays, but also a set of max-width queries for lower mobile resolutions.

 

2 Ways We Can Use Media Queries

responsive web design

Image by: Muhammad (via Wiki Commons)

Now that we know the basics about media queries, let’s talk about how we can use them. Once again, this depends mainly on the developer’s preference and coding approach.

The first way is to use media queries just like we’ve demonstrated in our examples – as part of our default stylesheet. This way, you write your default CSS and at the bottom, you write a number of media queries that target a set of lower and/or higher resolutions. This way, you’ll create a chain of resolution breaking points. This is the most efficient way to do responsive web design.

The second way involves using media queries on a link element – as part of your <head> attribute in the HTML document. You use the same logic, but only this way, to apply the proper style file – depending on the screen’s size. Here’s how it looks:

<head>
<link rel=”stylesheet” type=”text/css” href=”style-large.css” />
<link rel=”stylesheet” media=”screen and (min-width: 768px) and (max-width: 1024px)” href=”style-medium.css” />
<link rel=”stylesheet” media=”screen and (min-width: 480px) and (max-width: 767px)” href=”style-small.css” />
</head>

As you can see, we have linked 3 different CSS files. Initially, we apply the style-default.css file which is suitable for large resolutions. To make the website responsive, we’re using the additional 2 styles – ready to be applied if the media feature condition is met. Note that all of these style files target the same HTML elements, but with different CSS values.

If for instance, we visit the website from a 1920×1080 monitor, the default CSS will be applied and nothing more. If, however, we shrink down the browser’s window to let’s say 960px, the style-medium.css will be loaded as well. This will overwrite some of the styles that we have in our style-large.css. With this overwriting, we’re making the website responsive to that resolution range.

And there we have, a quick overview of creating responsive designs fit for every device, wasn’t so hard was it? 😉

Featured image credit: Bo-Yi Wu (via Flickr)

Tom De Spiegelaere

About Tom De Spiegelaere

I love everything visual, from photography to graphic design and special effects. I'm the founder of MangoMatter and specialise in creating sites that not only convert, but also easily outrank the competition in Google, giving my clients a website that markets itself!