CSS Breakpoints

In CSS, a statement called a media query allows you to determine the height and width of the current screen. The visible ‘screen’ is also called a viewport. Based on the screen size and orientation,  you can determine how best to represent the contents of your screen.

The media query starts with the @media rule.

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution


Here is an example of a media query that hides an element (display: none) if the viewport width is smaller than 600 pixels.

A media query can return other information besides viewport size and orientation. If you are interested in a full explanation, you can find one at https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

What is a Breakpoint?
Breakpoints are points defined in the CSS code that represent screen sizes which typically indicate a change in the type of device. While there are hundreds of different devices on the market, many of which have different viewport sizes, when coding breakpoints we are usually interested in the approximate size of desktopstablets, and mobile phones.

We then use CSS at these breakpoints to indicate changes in what we display, or how we display it, on different sized devices. For instance, here are pictures of the web site Etsy, one at a typical desktop size, another at the size of a mobile phone. What differences do you see?

The following images show the differences in Lattice.com from desktop to mobile phone:

A useful explanation of CSS breakpoints comes from browserstack.com:

Every website is accessed via devices with different screen sizes and resolutions. The software has to render perfectly across each screen size. Content or images cannot be distorted, cut out, or obscured.
To allow this, developers have to use CSS breakpoints. These are points defined in the code. Website content responds to these points and adjusts itself to the screen size to display the accurate layout.
Since CSS breakpoints are implemented with media queries, they are also sometimes termed media query breakpoints.
With CSS breakpoints in place, the website content will align itself with screen size and displays itself in a way that pleases the eye and facilitates visual consumption.

Responsive Sites: Typical changes from Desktop to Mobile Phone

As demonstrated in the Etsy and Lattice examples, typical changes from the desktop (or tablet) to a mobile phone include:

  • Changing a top navigation menu to a ‘hamburger’ or other menu that expands when clicked or tapped
  • Changing the number of columns
  • Hiding non-critical content

Common Screen Sizes and Breakpoints
As of December, 2021, here are some typical screen sizes and breakpoints that might be used:

Desktop: range: 768×1024 upwards
Most common browser size: 1920×1080

Tablet: range: 601×900 upwards
Most common size: 768×1024

Mobile Phone: range: 360×640 upwards
Most common size: 360×800 

Actual media queries:
Here are some actual media queries that identify standard devices. The first one covers smartphones in both portrait and landscape mode.

The /* Styles */  entry in the examples below would be replaced with the CSS styles that you wanted to use for that device.

Using media queries to create a responsive column layout:
Here’s an example from w3schools.com that changes the number of columns on the page depending on the screen size:

In the next week or two we will take a closer look at Responsive Design and how to lay out content on different screen sizes.