Responsive Web Design

Building for all devices

Media queries

Media types

@media all {
  /* Target all devices */
}

@media screen {
  /* Target devices with a physical screen */
}

@media print {
  /* Intended for printed material */
}

@media speech {
  /* Target speech synthesizers */
}

Media features

@media screen and (min-width: 1000px) {
  /* Screen is at least 1000 pixels wide */
}

@media screen and (max-height: 768px) {
  /* Screen is at most 768 pixels high */
}

@media screen and (min-resolution: 2dppx) {
  /* Screen has a pixel density of at least 2 dots per pixel */
}

/* 
 * And many more:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features
 */

Flexible layout

Use percentages

Variable sized elements using %:

.grid-item {
  width: 45%;
  /* ... */
}

@media screen and (min-width: 1000px) {
  .grid-item {
    width: 20%;
    /* ... */
  }
}

Element positioning

Floats lead the way:

/* Position elements next to each other */

.content .primary,
.content .secondary {
  float: left;
}

/* Or not! */

.content .primary,
.content .secondary {
  float: none;
}

Lab

https://github.com/owickstrom/rwd-lab