Media Query max-width

[AnchorDB]

Is there a general rule of thumb on a number of pixels for max-width when it comes to responsive design for various screen sizes? What is generally a good max-width for phones? tablets? etc?

[bbsmooth]

I’m going to suggest a method that a lot of people might not agree with but will prevent you from having to worry about pixel widths althogether.

First, you should use a narrow-first approach to styling. Narrow your browser as far in as it will go and style the page so it looks good at this narrow width. That will be your base CSS. Don’t use any media query break points for this.

Once you have the narrow styling looking good then you can gradually widen your browser until you feel you have enough horizontal real estate to start moving things around for a wider view port. This will be your first break point. You will use min-width instead of max-width. And here’s the kicker, you will use rem units instead of px. This is the part that a lot of people won’t agree with me on (but a lot of very prominent professionals do).

Notice, I didn’t tell you to worry about specific widths of different types of phones and tablets. When you use rem units it doesn’t matter because you are basing the break points on what the content needs, not some arbitrary px values. For example, say you have two divs that should be side-by-side in a wide view but one above the other in a narrow view. You start with the narrow view first and the CSS is easy because divs are block level elements so they naturally display one above the other, so you don’t have to do anything.

Then you start widening your browser until you feel you have enough room to place them side-by-side. When is there enough room? Well that depends on the content in the divs. What is the minimum amount of horizontal space in each div you feel you need to be able to put them side-by-side?

Let’s say that you feel each div needs a minimum of 25rem of width to be able to be side-by-side. Since there are two of them then you know the break point will be at least 50rem. And then you can factor in a gap between them if you like, let’s say 2rem, so now your break point is at least 52rem. There may be other factors to take into account as well (side padding, borders) and you can often use rem for those too so you just add them into the break point. For those that you use px (such as a border) then you can just add a little extra (such as 0.25rem) depending on how much px width you need. Unfortunately it looks like at this time not all browsers support using calc in media queries so you have to estimate like this for anything still using px width (which hopefully shouldn’t be much). I’m not sure why they don’t support calc in media queries, seems like an obvious usage to me, but it is what it is. Also, using box-sizing: border-box may remove some of these px issues.

Calculating rem is not hard. If you measure in px then you can divide that number by 16 (because this is the default font size that most people use in their browser) to get a rough estimate and then use your browser’s dev tools inspector to adjust until you have the rem number you want. Personally, I never bother measuring initially in px, you just get a feel for it over time and I can usually make a pretty good guess on the first try.

So if you don’t want to have to worry about the different widths on the various devices out there then use rem for your break points and for everything else you can that requires some sort of width. I use this method for every project I work on (and I have been doing a ton of them for many years now) and I never have a problem using rem and I have never had to worry about whether my creations would look good on any device.

[AnchorDB]

This is extremely well detailed, I’m definitely going to give this a try from now on, thanks.