@media query question

When trying to make a website responsive, what are the general breaking points you use?

  • 320px — 480px: Mobile devices
  • 481px — 768px: iPads, Tablets
  • 769px — 1024px: Small screens, laptops
  • 1025px — 1200px: Desktops, large screens
  • 1201px and more — Extra large screens, TV

I saw the list above and I am wondering if there’s a common breakpoint that professionals use. Like if I am dealing with a header in the first section of a website, how many times should I use @media on it to change the size and keep it responsive?

@media (max-width: 768px) {
  h1 {

@media (max-width: 480px) {
  h1 {

This would be my guess, but that is because I am working on a laptop. How am I supposed to know what font size to choose for h1 on larger screens like desktops or extra large screens…if I can’t actually make my screen larger and see what that would look like?

None. Seriously, I don’t set strict breakpoints like this, especially in px. I use rem units for breakpoints and each section of the page may have different breakpoints. Basically, I let the content determine where the breakpoints occur. I always start by styling the narrow view first (a lot of people refer to this as the “mobile” view but not everyone who views your website at this narrow width will be on a mobile device). After I have the narrow view styled then I widen the browser and determine when I want a shift in styling to occur and I set the break point there (again, in rem units). Rinse and repeat as needed. Different parts/sections of the page may shift at different breakpoints.

I will admit I am in the minority though. Most people use px for breakpoints and abide by a defined set of breakpoints like you listed above. I’m not knocking anyone who does this. This has been the standard way since media queries were first introduced. I’m just letting you know that there is another way, and in my opinion, a better way to use breakpoints.

1 Like

Thanks, this sounds like a great way to go about it. I will give it a try