Skip to content

Instantly share code, notes, and snippets.

@m-primo
Created April 26, 2020 23:25
Show Gist options
  • Select an option

  • Save m-primo/c87b856e33f763ee2ee098fbaff34dea to your computer and use it in GitHub Desktop.

Select an option

Save m-primo/c87b856e33f763ee2ee098fbaff34dea to your computer and use it in GitHub Desktop.

Revisions

  1. m-primo created this gist Apr 26, 2020.
    77 changes: 77 additions & 0 deletions std-media-query.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    /* Max */

    @media (max-width: 319px) { /* X-Small Screen */

    }
    @media (max-width: 479px) { /* Small Screen */

    }
    @media (max-width: 767px) { /* Medium Screen */

    }
    @media (max-width: 1023px) { /* Large Screen */

    }
    @media (max-width: 1199px) { /* X-Large Screen */

    }

    /* Min */

    @media (min-width: 320px) { /* X-Small Screen */

    }
    @media (min-width: 480px) { /* Small Screen */

    }
    @media (min-width: 768px) { /* Medium 1 Screen */

    }
    @media (min-width: 992px) { /* Medium 2 Screen */

    }
    @media (min-width: 1024px) { /* Large Screen */

    }
    @media (min-width: 1200px) { /* X-Large Screen */

    }

    /* ------------------------------------ */

    /* Most Common #1 */

    @media (max-width: 767px) {

    }
    @media (max-width: 991px) {

    }
    @media (max-width: 1199px) {

    }

    /* Most Common #2 */

    @media (min-width: 768px) {

    }
    @media (min-width: 992px) {

    }
    @media (min-width: 1200px) {

    }

    /* Most Common #3 */

    @media (min-width: 768px) and (max-width: 991px) {

    }
    @media (min-width: 992px) and (max-width: 1199px) {

    }
    @media (min-width: 1200px) {

    }