best media query breakpoints code example

Example 1: bootstrap media query breakpoints

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

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

Example 2: breakpoint bootstrap

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` 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) { ... }

Example 3: media query breakpoints

// Best Practice suggests
// keep default style for smallest screen size (portrait mobile, below 576px)
// and then proceed in assending order with media query like below

// Small devices (landscape phones, 576px and above till next break point)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and above till next break point)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and above till next break point)
@media (min-width: 992px) { ... }

// so on ...

Example 4: css media query responsive sizes

320px
480px
600px
768px
900px
1024px
1200px

Example 5: CSS Media Queries for all Resolution

/* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* insert styles here */
}
 
/* (320x480) Smartphone, Portrait */
@media only screen and (device-width: 320px) and (orientation: portrait) {
    /* insert styles here */
}
 
/* (320x480) Smartphone, Landscape */
@media only screen and (device-width: 480px) and (orientation: landscape) {
    /* insert styles here */
}
 
/* (480x800) Android */
@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
    /* insert styles here */
}
 
/* (640x960) iPhone 4 & 4S */
@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
    /* insert styles here */
}
 
/* (720x1280) Galaxy Nexus, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}
 
/* (720x1280) Galaxy Nexus, Landscape */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
    /* insert styles here */
}
 
/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* insert styles here */
}
 
/* (768x1024) iPad 1 & 2, Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* insert styles here */
}
 
/* (1024x768) iPad 1 & 2, Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* insert styles here */
}
 
/* (2048x1536) iPad 3 */
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
    /* insert styles here */
}
 
/* (1280x720) Galaxy Note 2, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}
 
/* (1366x768) WXGA Display */
@media  screen and (max-width: 1366px) {
    /* insert styles here */
}
 
/* (1280x1024) SXGA Display */
@media  screen and (max-width: 1280px) {
    /* insert styles here */
}
 
/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    /* insert styles here */
}
 
/* (1680x1050) WSXGA+ Display */
@media  screen and (max-width: 1680px) {
    /* insert styles here */
}
 
/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    /* insert styles here */
}
 
/* (1600x900) HD+ Display */
@media  screen and (max-width: 1600px) {
    /* insert styles here */
}