Good day, there are 2 monitors, one with a diagonal of 23 and a resolution of 1920x1080, and I make a website on it, and push off from it, creating adaptability for smaller resolutions, using the standard browser tool for testing adaptability, for example, when I check the resolution of 1366x768 and I create styles for this resolution, then everything is fine, but it’s worth it to open a website on a laptop with a resolution of 1366x768, the design is slightly different from what the browser tool shows for the same resolution, for example, if the tool for 1366 is exactly the same, then ie with the same resolution as a bit of everything floats down like this be? And the second point, there is a small laptop with a diagonal of 15 and a resolution of 1920x1080, and so all the default styles that were made for this resolution are floating, but everything is fine on the monitor with the same resolution, how to make styles for the same resolution but different sized devices ?

    2 answers 2

    It will be difficult to achieve "identity" on different devices. Start by adding <meta name="viewport" content="width=device-width, initial-scale=1"> (at the head) of your site. Again, if you do not delve into the problems of cross-browser compatibility. You can try to give up the size in px and go to em / rem or even to vw / vh

      If I understand the question correctly, then in styles you need to use relative dimensions in em / rem. Although I personally had problems with the density of pixels on different devices (dpi) - on the monitor one thing, on the real device everything leaves.