Media Query - Good practice


Would it be considered good practice (or does it sound useful) to have a page designed under 3 main media-queries?

Eg.: One page design for smaller/portrait screen, one design for regular full hd widescreens and another for 4k/8k widescreens?

I keep strugling with thinking how a page will lose it’s intended experience flow due to screen sizing, even if it’s all organized in responsive syntax.

Thanks in advance :slight_smile:

Hello @ziulandueza, welcome to the forums! Yes, you could do it like that-but make sure you check it in each of those breakpoints, as well as smaller or larger than the maximum/minimum size you specified in the media queries. This will ensure there aren’t any screen sizes that break (so to speak) the design of your website.

Also, it is a good idea to use responsive units in your CSS, instead of px.
This article gives quite a few different units.
This article gives a nice brief overview of the different types of unit.
The first part of this article (up to the section called numbers) is also very helpful.


hey, thanks for adding the resource links definitely a point in the right direction!

1 Like