Size mismatch between photoshop and browser?

Question

css

Good evening.
I downloaded the layout of the site, I decided to practice layout. In Photoshop, margin: 100px is set for the element, I write the same value in CSS, but if in Photoshop this margin occupies 10% of the page, then in the browser it is 15%, and it’s impossible to fit everything you need on the entire visible page (height: 100vh) (I use photoshop values).
I know that it's all about resolution, but what do layout designers do in such situations? Specify all values ​​in %?
I will be grateful for the answer.
PS I'm typing on a 15.6 inch laptop.

Answer 1

Your question is that you have a layout of 1920x1080, and a monitor of 1366x768, as I understand it?
P.S. In the browser console, use window.innerWidth to find out exactly the current size of the viewport, taking into account the zoom.
P.S.S. The pixelPerfect extension for chrome with zoom is friendly ok too