Search code examples
cssmedia-queries

what media query code should be use for user interface


My application does not show well on wide and big display firefox os devices? what is a right media query code for all type devices?


Solution

  •      /*==================================================
    

    = Bootstrap 3 Media Queries = ==================================================*/

    /*==========  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) {
    
    }