How to specify CSS media query breakpoints?

Question

What is the right method to use CSS media queries?
Should I specify a breakpoint for each device size or write the queries according to when my website's shape starts to get bad? What is the convention?

For example: With the first choice, I will get the sizes from a website like w3schoolsThen specify a media query for each of these devices:

   /* Extra small devices (phones, 600px and down) */
   @media only screen and (max-width: 600px) {...}

   /* Small devices (portrait tablets and large phones, 600px and up) */
   @media only screen and (min-width: 600px) {...}

   /* Medium devices (landscape tablets, 768px and up) */
   @media only screen and (min-width: 768px) {...}

   /* Large devices (laptops/desktops, 992px and up) */
   @media only screen and (min-width: 992px) {...}

   /* Extra large devices (large laptops and desktops, 1200px and up) */
   @media only screen and (min-width: 1200px) {...}

But with the second option, I will only write a new CSS media query when the website's shape breaks. Example:

    @media only screen and (min-width: 764px) {...}

    @media only screen and (min-width: 1092px) {...}

    @media only screen and (min-width: 1243px) {...}

for me the second one works well. And I always find simple to go from small, to mid, to large to x-large breakpoints with min. It's easier to read, to modify and to debug. — pier farrugia, May 04 '23 at 09:20

score 1 · Accepted Answer · answered May 04 '23 at 10:07

There answer is that you use as many as necessary. If you are really particular about having your site look excellent for any viewport size then you will have lots of media queries at random breakpoints. But for most pages that level of tailoring isn’t necessary.

My default way to write responsive CSS is that the base styles are the mobile styles (phones held vertically), then I write media queries at the following breakpoints:

min-width: 500px - phones held horizontally
min-width: 750px - ipads held vertically
min-width: 1000px - ipads held horizontally
min-width: 1250px - laptops (if necessary)

Safari has a nice responsive design mode for testing different devices and orientations, or you can use the iOS Simulator (part of Xcode).

How to specify CSS media query breakpoints?

1 Answers1