How does the OS affect the CSS?

Question

So this is my case. I have a project that looks good on my screen, and i run my Windows on 100% "zoom" on the OS, but my buddy runs his OS on 150% "zoom" and we have the same size on our monitors. And on his screen, all the margins and paddings are way off, if i compare to my 100% zoom. How do you work with this on a professional level? Some type of function that uses windows dimensions?

And how does this affect the CSS?

We run the code in Chrome, and my thought is that chrome reads the zoom and does'nt give back the same pixelratio if you run Windows on 150% zoom.

Excuse my english, hard to explain this but thankful for all answers och ideas Cheers

Answer 1

as much as I could guess it's about dimensions of monitors you 2 are using not the operating system for example while you're using a 1920px, 1080px monitor on windows your friend on mac has a monitor with dimensions 2560, 1440

If you are using px units that could be cause of your issue.

Try changing dimensions of your root component to fixed values (eg px, rem, em, 100vh, 100vw, etc...) and work your way through child components with units like (percentage, vh, vw) that is how I would solve this problem

also I remember reading an article about px unit in CSS being fixed real world sized but I wouldn't really agree with that personally after changing my monitor

adding to the answer:

stack overflow on 1920, 1080:

stack overflow on 2560, 1440: