What screen sizes and browsers to use as reference to make 100% responsive websites?

nowadays there are so many screen sizes for mobile phones and tablets

So far I used my pc size as reference for my web projects:

  • 1920 px width x 1030 px height = maximum dimension of my pc browser window

  • 622 px width x 778 px height = minimum dimension of my pc browser window

Yesterday i used Chrome dev tools to view my portfolio, that I am updating, via different sizes and it looked bad

my portfolio only looks good between the minimum and maximum sizes of my pc browser screen

what screen sizes and browsers to use as reference to make 100% responsive websites ? are pixels recommended to be used ? I am extermely confused

how to use Google Chrome dev tools in this regard?

I completed Responsive design, HTML and CSS certification by freeCodeCamp and I tried to apply what I studied to achieve mobile-friendly like media queries, flexbox

But for example I saw yesterday this tutorial and the teacher was putting the accent on putting content in <div> to make it more mobile-friendly

how do you really achieve mobile-friendly websites ?

also does anyone can recommend a game or something to practise media queries?

I found games to practise programming languages like JavaScript, for flexbox but not for media queries, does Scratch offer that?

I feel that doing games would be the best way for me to prepare properly to do projects. the goal is to truly understand the code I am writing and how and when to apply that as this is what I am really missing now

Regarding this part, I found this reference from W3schools.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.