Responsive design and screen sizes

Hello. I’m learning about responsive design, and there’s one thing bugging me: it seems that it’s common practice to consider a 320-480px screen for mobile screens (dev tools consideres a large mobile to be 425px wide), but either I’ve got something wrong, or this hasn’t been the default for mobile devices for a while now. Most phones have HD of FullHD screens nowadays, which means they are at least 720px wide, while still being way smaller than a laptop or tablet in actual size.

How can we do we account for that - small screens with high pixel density - when designing a website?

Although this may not be what you’re looking for, I think there is also some form of media query which deals with resolution. This website explains it well.


Thanks. I guess that using DPI could work, since laptops and monitors seem to have a much lower default… But I don’t know, it seems like there should be a better way to determine how small or big a screen is, instead of how much resolution it has.

The only thing I could think of right now is targeting portrait mode, but I’m not sure if that would just cause more problems than it solves.

In case anyone else has the same doubt and comes across this topic, I’ve figure it out: turns out that what CSS considers a pixel is not the same as a device physical pixel, specially on high density screens. It uses something called a pixel ratio to calculate how many hardware pixels should fit into a CSS pixel for a comfortable visual output, and that basically means most mobile screens will end up being something like 425 pixels wide (in portrait mode) for web development purposes.

You can read more about this here and here.