{"id":78481,"date":"2023-02-17T13:29:33","date_gmt":"2023-02-17T13:29:33","guid":{"rendered":"\/tutorials\/?p=78481"},"modified":"2025-12-02T15:17:36","modified_gmt":"2025-12-02T15:17:36","slug":"css-breakpoints","status":"publish","type":"post","link":"\/ca\/tutorials\/css-breakpoints\/","title":{"rendered":"How to use CSS breakpoints for responsive design, most common media breakpoints + tips"},"content":{"rendered":"

CSS breakpoints are values that determine how a website looks on different screen sizes. When visitors’ devices reach their breakpoints, the website content responds and adjusts accordingly. <\/p>

These breakpoints, together with CSS media queries, are responsible for a responsive website design. In short, they make your website look proportional when viewed on a different screen size. <\/p>

In this article, we’ll show you how to implement CSS breakpoints for your site. You will also get tips on how to use breakpoints for a responsive web design. <\/p>

\n\n\n

\n \n \n <\/svg>\n

\n What Is a CSS Breakpoint?\n <\/p>\n <\/div>\n


\nA CSS breakpoint is a value that determines a website’s size and layout across different screen sizes. It creates a responsive website design when implemented with a CSS media query. <\/p><\/div>\n\n\n\n<\/p>

A breakpoint’s value is set based on the user’s device height or width. While it is typically shown in pixels, breakpoints can also use CSS units like em<\/strong>, rem<\/strong>, or percentages<\/strong>. <\/p>

With breakpoints and media queries, you can define different conditions and adjust your site content based on them. For instance, you can show the navigation bar only on large devices.<\/p>

To apply breakpoints and media queries, you can only use an external CSS type<\/a>. To do so, you must create and link a stylesheet to your site’s HTML file<\/a>.<\/p>

How to Set CSS Breakpoints<\/h2>

There are two ways of setting CSS breakpoints – based on the device or site’s content. <\/p>

\n
\n \n \n <\/svg>\n

\n Suggested Reading <\/p>\n <\/div>\n

Before proceeding, check out our CSS cheat sheet<\/a> if you are unfamiliar with the styling language.<\/p>\n <\/div>\n \n\n\n\n<\/p>

How to Use Breakpoints Based on Device<\/h3>

Breakpoints can use the device’s width and length as the parameters, typically shown in the pixel values. Here’s an example of them:<\/p>

        
\/* Portrait iPhone 6 to 8 *\/\n@media only screen\nand (min-width: 375px)\nand (max-width: 667px)\nand (-webkit-min-device-pixel-ratio: 2)\nand (orientation: portrait){\n...\n}<\/code><\/pre><\/div>\n         <\/pre>
However, determining device-based breakpoints might be tricky since their screen resolutions vary. It is also time-consuming since developers must add CSS breakpoints every time a new device is released.<\/p>
Instead of setting a breakpoint for specific devices, you can group them based on resolutions. Here’s the code example:<\/p>
\/* Small devices (portrait tablets and large phones, 600px and up) *\/\n@media only screen and (min-width: 600px) {...}\n\/* Medium devices (landscape tablets, 768px and up) *\/\n@media only screen and (min-width: 768px) {...}\n\/* Extra large devices (large laptops and desktops, 1200px and up) *\/\n@media only screen and (min-width: 1200px) {...}<\/pre>
While it’s possible to set breakpoints only for popular devices, we don’t recommend it since your target audience may use various devices.<\/p>
How to Use Breakpoints Based on Content<\/h3>
You can set your breakpoints based on your site’s content. As a result, you won’t need to add a new breakpoint whenever a device comes out, saving time and keeping your site code clean. <\/p>
With this method, you add breakpoints on the positions where the content starts to look misaligned or distorted when rendered on a different screen size. <\/p>
You can set the parameter in two ways – using a minimum width pixel value or range. For example, the following will run the CSS code for devices with a min screen width of 720<\/strong> pixels:<\/p>
        
@media only screen (min-width: 720px){\n...\n}<\/code><\/pre><\/div>\n        <\/pre>
Meanwhile, the following applies if the device width is between 720<\/strong> and 1280<\/strong> pixels:<\/p>
css]@media only screen and (min-width: 720px) and (max-width: 1280px){\n…\n}[\/css]<\/pre>
How to Use min-width or max-width CSS Breakpoints<\/h2>
Additionally, you can set breakpoints using a specific value with min-width,<\/strong> max-width,<\/strong> or both to define a range. Each of them is ideal for a particular use case.<\/p>
Use min-width <\/strong>breakpoints when developing a website with the mobile-first approach. It means you set the default CSS for the smaller screen and adjust it for larger devices. <\/p>
Conversely, when developing for larger devices, use max-width<\/strong> breakpoints and rearrange your website for smaller screens. Use both only when you are particular about your site’s appearance on a certain device.<\/p>
        
\n            
\n                \n                    \n                <\/svg>\n                
\n                    Pro Tip                <\/p>\n            <\/div>\n            
In addition to screen adjustment, you can use breakpoint with other media queries like print and speech.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p>
Media Query Breakpoints<\/h2>
To set your media query breakpoints, determine what devices visitors use to render your website. They may use computers, tablets, or mobile phones. <\/p>
The common breakpoints for these devices are based on their resolution. Some of the most popular ones are 1920×1080, 1366×768, and 360×640. <\/p>
Alternatively, you may use different frameworks’ breakpoints. Since they are optimized for the mobile-first approach, use them as references when developing for larger-screen devices. <\/p>
Here are a few examples of popular frameworks with their breakpoints:<\/p>