Common CSS Breakpoints For Media Queries

What Are CSS Media Queries

CSS media queries are style rules that apply CSS only when the viewport meets a condition, such as a width breakpoint, letting one page adapt its layout across phones, tablets, and desktops.

For example, compare two navigation styles, a horizontal bar and a responsive vertical layout:

As the screen narrows, a media query flips that horizontal bar into the vertical menu below:

The vertical menu is far easier to use on small screens, and the media query handles the switch automatically.

The syntax of media queries looks something like this:

@media only screen and (max-width: viewportSize (in pixels)) {
  // applied CSS styling
}


// for mobile view
@media only screen and (max-width: 481px) {
  // applied CSS styling
}


// for tablet view
@media only screen and (max-width: 769px) {
  // applied CSS styling
}


// for laptop view
@media only screen and (max-width: 1026px) {
  // applied CSS styling
}

Till now, we have been using pixel units in the media queries to define the screen size, but it is not mandatory. You can also use other measuring units, including em, rem, etc.

A breakpoint is the screen width where a media query starts to apply. There is no fixed rule for choosing one, but a few common values cover most devices, with larger screens using larger breakpoints.

CSS frameworks such as Bootstrap and Tailwind ship pre-defined breakpoints as keywords, so you skip defining them yourself. These keywords map to breakpoints as follows:

Beyond fixed values, CSS media queries offer other ways to define breakpoints.

The two approaches are:

• Content-based breakpoints
• Device-based breakpoints

Note: Test CSS Media Queries across thousands of real browser environments. Try TestMu AI Today!

Content-Based Breakpoints

When assigning responsive breakpoints, prioritize the content of the interface over predefined fixed values. Content-based breakpoints let the layout, not a device list, decide where each breakpoint goes.

With this method, you add a new breakpoint at every width where content shifts out of place and breaks the layout. These advanced CSS tricks and techniques make breakpoints much easier to place.

Take a paragraph that reads fine on desktop but overflows as the screen narrows. In my experience, resizing until the text breaks is the fastest way to find the exact width that needs a breakpoint:

To keep the reading experience intact, add a breakpoint wherever the text starts to overflow or misalign. The layout then stays comfortable to read at every width.

The same content-based approach works as the screen widens, not only as it narrows. The example below shows it in action:

Here the breakpoint triggers at 480px and above: wider screens show four columns in a row, while anything below 480px collapses to a single column.

This breakpoint targets the 480px to 768px range: within that band the grid shows two columns, and outside it, on narrower screens, it drops to a single column.

Device-Based Breakpoints

Here you group devices by screen resolution, pick one breakpoint per group, and style that breakpoint so it covers most devices in the group.

Target a specific device by its width, height, and pixel ratio (iPhone 14 Pro Max shown; swap the values per device):

/* ----------- iPhone 14 pro max ----------- */


/* 932 x 430 pixels*/ 
@media only screen
and (device-width: 430px) 
and (device-height: 932px) 
and (-webkit-device-pixel-ratio: 3) { 
  /* ----------- CSS Styling -----------
 */
}

You can also group devices by screen width and assign one breakpoint per group. The -webkit-device-pixel-ratio feature targets specific pixel ratios and is used by WebKit browsers like Safari.

/* For very small screen devices (500px and below) */
@media only screen and (max-width: 500px){ 
/* CSS Styling */
}


/* Small screen devices (600px and above) */
@media only screen and (min-width: 600px) {
  /* CSS Styling */
}


/* Medium screen devices (700px and above) */
@media only screen and (min-width: 700px) {
  /* CSS Styling */
}


/* Big screen devices (900px and above) */
@media only screen and (min-width: 900px) {
  /* CSS Styling */



/* Extra big screen devices (1200px and above) */
@media only screen and (min-width: 1200px) {
  /* CSS Styling */
}

Breakpoints With Sass

Sass is a stylesheet language layered on CSS, adding nested rules, mixins, and variables while staying fully compatible with plain CSS. Files use the .sass or .scss extension.

Sass supports everything CSS does, including media query breakpoints and every CSS at-rule. That forward compatibility with at-rules is part of why teams adopt it.

Sass offers some different syntaxes to create CSS at-rule. These syntax are @< tag1 >< tag2 >, @< tag >{…}, or @< tag1 >< tag2 >{…}.

@image {
width: 30px;
src: url("#image_link");
}


@title {
font-family: "Sarif";
color: "red";
}

Placing a CSS rule inside an at-rule lets you apply conditional styling without changing the underlying selector.

Once Sass is installed, it compiles your rules: a source input.scss file is pre-processed and assembled into an output.css file the browser reads.

@supports

The @supports at-rule applies a block of CSS only if the browser supports a given property. If the condition is true, the styling applies; otherwise it is skipped.

Here is the syntax of the @support at-rule:

@supports (condition to be applied) {
    //  CSS Styles to be applied 
}

Let's look at an example of it:

@supports (display: grid) {
  .classname {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 3rem;
  }
}

Here the condition is display: grid. Most modern browsers support CSS Grid, but older ones do not, and Apple's Safari only became fully compatible from Safari 10 onward.

@media

The @media at-rule is the most common way to add responsiveness, letting you define different styling per screen width across devices.

It adapts the UI to the device by examining factors like width, height, orientation, and resolution.

It can also define separate styling for screen readers or printed documents, not just screens.

Syntax of @media is mentioned below:

@media only screen and (max-width: viewportSize (in pixels)) {
 // applied CSS styling
}

For the example part of @media, you can take a look at some of the examples explained earlier in this blog.

@keyframes

The @keyframes at-rule defines CSS animations by describing how styles change over the course of the animation.

To define changing styles, you set a start and end state. Use the keyframe values 0% and 100%, where 0% is the animation's starting position and 100% its ending position.

Animation properties give you full control over how the animation looks. Note that inside @keyframes, the !important rule has no effect.

Here is the syntax of @keyframes at-rule:

@keyframes animation-name {keyframes-selector {css-styles;}}

Here's an example of @keyframes:

If we break it down this example, then we get:

• @keyframes is the keyword to define a new frame,
• animate is the name of the frame,
• from represents the starting point of the frame
• to represents the endpoint of the frame

In the from block, scale(1,1) starts the animation at the original height and width. The to block sets scale() width to 4.5x, so the element stretches to 4.5x its width.

Note: To apply this animation over an element, we need to use a couple of CSS animation properties, including animate-name, animation-timing-function, and animation-duration on the targeted element.