Media query Device Breakpoints

Posted by admin at March 22, 2020

Breakpoints are the design element cutoff points you specify in your website design that provide the most effective visual layout for your site’s content. Breakpoints can be divided into two different types; major and minor. Major breakpoints are usually based on the most classic device sizes being used by people, and minor are breakpoints are used to fix content issues between the major breakpoints. It’s imperative that you create web applications that are focused on readable content at any width. You should always incorporate a fluid layout structure by using percentage widths to account for all widths between major breakpoints.

Example of a set of major device breakpoints:

/* Extra small devices (phones, up to 480px) */
@media screen and (max-width: 767px) {...}

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

/* tablets/desktops and up  */
@media (min-width: 992px) and (max-width: 1199px) {...}

/* large like desktops and up */
@media screen and (min-width: 1200px) {...}

Remember to design your website’s layout for the smallest mobile device first, and progressively enlarge the layout design as more screen area becomes available. For devices with large screens, it’s best to limit the maximum width of the container panel so that it doesn’t consume the whole screen width, as in the following:

//css for main container
.container {
   max-width: 62.5rem;

Avoid using pixels to declare your breakpoints, since this creates a horizontal scrollbar when the user zooms in on your content. Instead of using pixels, use relative units, which allows browsers to adjust the design, based on the user’s zoom level.

Media queries detect your website’s viewport width, color, color index, aspect ratio, device aspect ratio, width, device width, height, device height, orientation, monochrome, resolution, scan, and pixel-density. To optimize media queries, you can use:

  • Pixel-density to conditionally serve larger background images and icon sprites for Retina and other high resolution screens
  • Height to detect the available screen height, and adjust styles accordingly
  • Orientation to detect whether a screen is in portrait or landscape mode. You can also use Orientation to conditionally disable fixed positioning to free up screen area.

Employing conditional loading allows you to prioritize your website’s core content, and doesn’t detract from your website’s performance.


Write a Reply or Comment