Media query breakpoints

Is there an industry standard on what media queries to use for more reliable responsiveness? How many breakpoints and at what screen sizes?

Comments 4

  • Hello LarsNmar,

    This thing depends on several options of your design and the logic of the design.
    Next is the Mobile Friendly first or Desktop friendly first, this to logic options change the media queries a little bit
    Here I can give you the bootstrap 3 media query logic since many people use that version.

    /*==========  Mobile First Method  ==========*/
    
    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
    
    }
    
    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
    
    }
    
    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
    
    }
    
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
    
    }
    
    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
    
    }
    
    /*==========  Non-Mobile First Method  ==========*/
    
    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
    
    }
    
    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
    
    }
    
    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    
    }
    
    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
    
    }
    
    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
    
    }
  • I know this might only bring further confusion, but Bootstrap 4 actually has updated breakpoints that go like this:

    /* Extra small devices (portrait phones, less than 576px) */
    /* No media query since this is the default in Bootstrap */
    
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {}
    
    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {}
    
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {}
    
    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {}
  • Here is the renowned foundation for responsive design:
    https://abookapart.com/products/responsive-web-design

    Here is the good free course:
    https://www.udacity.com/course/responsive-web-design-fundamentals--ud893

    In short these guys say your breakpoints really depend on how you want your site's design to look when resizing the browser window (in Chrome dev tools responsive mode). E.g. if at some width (or height) the particular part of your page starts looking out of order, apply breakpoint here with necessary CSS changes. You can have as many BPs as you see fit.

    For each different site your BPs can be pretty different. This is normal.