Media Queries

Common Media Breakpoints

  • Desktop: 1024px
    Tablet: 768px, 640px
    Mobile: 480px, 320px

    For your consideration...
    Will your CSS mess with breakpoints? Make sure you test it!

Media Query Syntax

  • /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {...}

    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {...}

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {...}

    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {...}

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {...}