Cheat Sheet: Responsive Design

responsive.css

@media all and (max-width: 1024px) {...}
@media all and (min-width: 800px) and (max-width: 1024px) {...}
@media not screen and (color) {...}
@media only screen and (orientation: portrait) {...}

@media all and (max-width: 420px) {
  section, aside {
    float: none;
    width: auto;
  }
}

/*
Your instinct might be to write media query breakpoints around common viewport sizes as determined by different device resolutions, such as 320px, 480px, 768px, 1024px, 1224px, and so forth. This is a bad idea.

When building a responsive website it should adjust to an array of different viewport sizes, regardless of the device. Breakpoints should only be introduced when a website starts to break, look weird, or the experience is being hampered.

Additionally, new devices and resolutions are being released all of the time. Trying to keep up with these changes could be an endless process.

http://learn.shayhowe.com/advanced-html-css/responsive-web-design
*/

responsive.html

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