Breakpoints

When we consider the challenges and solutions to device-agnostic design, one of the approaches for prioritization was mobile first, which means that the design would be first optimized for mobile devices, after which the design would be adapted for larger screens. One approach to this with media queries is the use of breakpoints, which refer to the points (e.g. widths) where the layout changes. In effect, we could first create a breakpoint for mobile devices, and then continue by creating breakpoints for larger screens.

The commonly used breakpoints change over time with the evolution of devices. As an example, presently, TailwindCSS has the following default breakpoints: 640px, 768px, 1024px, 1280px, and 1536px.

If you're interested in learning more about TailwindCSS, it is briefly discussed in the course Designing and Building Scalable Web Applications.

As an example, we could define a style sheet template as follows. The first breakpoint is for styles smaller than 640px, the second breakpoint is for styles between 640px and 768px, and so on.

@media (max-width: 639px) { }
@media (min-width: 640px) { }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
@media (min-width: 1280px) { }
@media (min-width: 1536px) { }

Using the template, we could define a background color for the first two breakpoints as follows.

@media (max-width: 639px) { 
  body {
    background-color: lightgray;
  }
}
@media (min-width: 640px) { 
  body {
    background-color: lightblue;
  }
}
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
@media (min-width: 1280px) { }
@media (min-width: 1536px) { }

The above style sheet would result with the following behavior. When you adjust the width of the screen, you'll notice that the background color changes at the breakpoints. Note also that as the background color is not defined for the breakpoint 768px and above, the background color will remain the same.

In practice, the breakpoints and media queries could be used to adjust the way how a page is displayed. For example, below, a grid layout with two columns is used for the first breakpoint, while the subsequent breakpoint uses three columns.

@media (max-width: 639px) { 
  #container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 640px) { 
  #container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.item {
  margin: 1em;
  padding: 1em;
  border-radius: 0.33em;
  background-color: rgb(207, 232, 220);
}

The above styling would behave as follows.