How Do we Know The maximum -width and the maximum height of each and every device

1

As We Learn in Freecodecamp. The way to make website Responsive is using
@media-query Bellow.

@media (max-width: 100px) { /* CSS Rules */ }
@media (min-height: 350px) { /* CSS Rules */ }

so how Do we Know The maximum -width and the maximum height of each and every device… for example? for phone, tablet not-book, computer…etc
is it works if we set it by guess?

2

We don’t. And making a layout that is targeted at device-specific dimensions is not the correct approach to take.

There are some generic breakpoints we can use, which is what CSS frameworks have to do because they can’t know ahead of time what your layout is going to look like.

For example, here is the Bootstrap .container class and its related media queries.

However, you do know what your layout looks like. So all you have to do is adjust the screen size until something breaks and make the corrections at that size. You don’t have to guess or make generic breakpoints.

Also, a media query isn’t always the answer. The layout should be as responsive/fluid as it can be from the get-go, using relative units and layout tools like flexbox and CSS grid. Then you can add media queries when you have to. Like when making major layout changes or adjusting the size or location of specific elements.

1 Like
3

Personally, I tend to do my media breakpoints using em units instead of pixels. It allows you to deal with users increasing the font size much easier. Because the way your layout looks at 768px wide will be much different if your font size is default value or increased by 200%.

1 Like
4

so you use like max-width: 200em?
how do you deal with image sizes and such in that case? same thing?

5

it is easy to make image Responsive. (freecodecamp teach me)

img
{
  max-width:100%;
  height:auto;
}
1 Like
6

Image sizing can be based on em units as well.

I start by developing for mobile first and then use media queries to handle bigger widths. My breakpoints use min-width based on em units. I can’t give you specific em breakpoints because it will depend on your layout. Just start manually increasing the font size/browser width and you will figure out where to add the breakpoints.

Also, as @lasjorg said above, a lot of the time we rely way too much on media queries when a good responsive design will get us what we need in the first place. So I often find that I don’t really use too many breakpoints because the layout already changes as the browser width/font size changes.

1 Like
7

There is debate about what units are best to use for media queries (google search). Using the em unit does seem to be the “best”. But if I’m honest, for most projects that are just for fun I have given up on using em, as it’s just easier to use px. But for anything, not just a personal project you should consider if using em wouldn’t be more appropriate.

Here is a Codepen that shows what happens if the user changes their font size with two elements sized using px and em
https://codepen.io/nwalton3/full/xvnHy

1 Like