Tutorials

Responsive CSS

"Making your site easily resize to mobile and beyond"

Introduction

Media queries are a type of CSS that allow content to adapt to various conditions. They are a fundamental technology of responsive web design.

There is a lot of flexibility built into media queries. You can target specific screen widths, specific devices, or specific outputs (like print).

Syntax

A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators. Media queries are case-insensitive.

See more specifics regarding syntax: Media Queries on Mozilla

Making websites responsive

Generally speaking, I think it’s not good practice to target specific devices since new devices are being invented all the time. Instead, it is better (and more future-proof) to target specific screen-based numerical breakpoints.

Examples

Open these examples and try changing the width of the result window:

In the last example, here’s the CSS:

nav {
	text-align: center;
	border-bottom: 1px solid black;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li {
	display: inline-block;
	list-style-type: none;
	margin: 0;
	padding: 1em 0.5em 1.5em;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	background: yellow;
}

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

  ul {
	margin: 1em 0;
  }

  li {
	display: block;
	padding: 0.5em;
  }

}

The media query at the bottom says “only apply these styles within this media query if your browser's viewport width is equal to or narrower than 420px.” So looking at those media queries inside, we see that, for example, the li is now display: block; instead of display: inline-block; as it was before. When it applies or the condition is true, the CSS within the media query overrides the other CSS.

Here’s one more example from allmyfriendsatonce.com. This one is a print media query:


@media print {

   #keyboard-arrows {
	 display: none;
   }

   #side-column {
	 height: auto;
	 overflow:hidden;
   }

   #main-column {
	 width: 100%;
	 margin: 0;
	 height: auto;
	 position: relative;
   }

   li.current path {
	 fill: #000000 !important;
	 color: #000000 !important;
   }

   li:not(.current) {
	 display: none !important;
   }

}

The above lines of CSS are about displaying certain parts of the website so they look good when you print the website from the browser. In this specific example, UI elements like the #keyboard-arrows are set to display: none; making for a cleaner looking printed page.

Important line of HTML code!

Most of what we've been talking about happens in CSS.

However, there is one line in HTML you need to have to make this all go smoothly.

I’ve shown the following line of code before. You might recognize it from our HTML skeleton…

<meta name="viewport" content="width=device-width, initial-scale=1.0">

As you know, this line goes in the <head> of your document. It makes sure whatever device you’re on (tablet or mobile) won’t automatically scale your page. If you forget this line, your media queries might not work as expected when using a tablet or mobile device.

References

To get the lay of the land, I suggest first checking out these larger websites that use responsive design…

Here are some smaller websites that I think are doing something novel (or at least very usable) with responsive design:

Here are some experimental works that use responsive, in one way or another:

And here are more resources for responsive design: