Responsive web design is the practce of designing a website so that it acts and behaves responsively when resized to different widths. Try resizing this window to see what I mean. You should see the background color change from green at the widest to blue and then to yellow at the narrowest width. Some other elements of the page change as well. Don't be alarmed; it is intentional. This behavior comes from using CSS media queries. That's right. Not JavaScript.

Media Queries

This is what the media queries look like:
/* This is for all widths. */
body {

/* This is for all widths greater than 480 pixels wide. */
@media only screen and (min-width: 480px) {
  body {

/* This is for all widths greater than 768 pixels wide. */
@media only screen and (min-width: 768px) {
  body {


This is nice and all, but are media queries like that supported everywhere?
Well, the short answer is 'No.' The long answer is 'Yes.' Thanks goes to respond.js.


Respond.js is simply a javascript library that enables mediaqueries in older browsers.