johnsiwicki
6/9/2014 - 5:13 PM

Media Queries breakdown

Media Queries breakdown

/* Media Queries used for mobile first device size classes */
    
    /* For phone classes */
    @media only screen { } /* For mobile styles */

    /* For Tablet Classes */
    @media only screen and (min-width: 48em) { } /* min-width 768px for Tablet styles */

    /* For Laptop Classes */
    @media only screen and (min-width: 62em) { } /* min-width 992px for laptop to small desktop styles /*
    
    
    /* For Desktop Classes */
    @media only screen and (min-width: 75em) { } /* min-width 1200px medium to large Desktop styles /*



    /* Others Media Queries used for devices with min and max used with show and hide classes*/

    @media only screen and (max-width: 47.938em) { } /* Up to 767px */

    @media only screen and (min-width: 48em) and (max-width: 61.938em) { } /* 768px to 991px */

    @media only screen and (min-width: 62em) and (max-width: 74.938em) { } /*  992px to 1199px */

    @media only screen and (min-width: 75em) { } /* 1200px and up */

    /* Used to stack columns 480px and under */
    @media only screen and (max-width: 30em){ } /* max-width 30em 480px */