Designers usually develop their designs at around 1440px, so resizing may mess up the proportions of websites, look bad on larger screens and require loads of @media break points to fix them.
The solution to this is to set the websites body and html elements to a specific font-size in vw value and input all distances and sizes not as pixel values but at rem values.
This setup requires just a few breakpoints which define the body and html font-size in order to fix the whole website within good sizing parameters.
I found this supercool and fast way to simply convert pixel to rem by dividing by 10 (example 10px is 1rem) by using the following html and body font-sizing based on which layout size was chosen by the designer:
1280px: html font-size: 0.782vw;
1440px: html font-size: 0.695vw;
1680px: html font-size: 0.595vw;
1920px: html font-size: 0.521vw;
Please remember to use rem sizing for ALL sizes from now on: fonts, divs, padding, margins, everything. You’ll thank me for this.