Media Query - Good practice

Hey,

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.

3 Likes

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

1 Like