Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Fall 2019

## Responsive Layouts

Site is "responsive" to different devices.

CSS media query:

    /* Larger than mobile */
    @media (min-width: 400px) { /* specific rules go here */ }

    /* Larger than phablet (also point when grid becomes active) */
    @media (min-width: 550px) { /* specific rules go here */ }

    /* Larger than tablet */
    @media (min-width: 750px) { /* specific rules go here */ }

    /* Larger than desktop */
    @media (min-width: 1000px) { /* specific rules go here */ }

    /* Larger than Desktop HD */
    @media (min-width: 1200px) { /* specific rules go here */ }

Copyright © David Heitmeyer