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 3

  • 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) {}