A Quick One About CSS Viewport Sizes

I can still remember to this day when I wrote my very first web page on a computer that had a CRT monitor with a resolution of 640x480 pixels. This was around the late 90s or early 2000s.

Back then everything had a "responsive" design even though that word was foreign to web developers. We just assumed that if people have 640px widths or 800px widths others most likely have smaller or larger resolution sizes.

Today, we somewhat come full circle with responsive design, though it's not just about pixel width, oh it's much much more. There are so many variables to take into account that I honestly lost track of it all. Display sizes come in all shapes and forms ranging from 320px width up to 5120px wide or more, not to mention pixel density multipliers, image art direction, and so on...

I see a lot of web designers adjusting their design to make it look good only on a handful of pixel widths like the most popular ones being 768px, 1024px, 1280px, ... where they should create web designs that work on all resolutions.

Progressive enhancement should be core to web design as well, targeting the smallest screen size and working your way up to larger sizes, be it using CSS media queries, containers, flexbox, or CSS grids.

Disregard popular resolutions, because I can resize my browser window to 628x1317. Does the design look good on it? The answer should always be yes.

---

Cover photo byPexels