How to calculate the height of each landing screen?

Question

Design

I need to make a site layout design for several screen resolutions - for desktop monitors, laptops, tablets, phones. If we take the layout of the site for screens of 1024x768 pixels, then it turns out that the first screen of the landing should be 768 pixels in height, right? Or smaller - we should be guided by the size of the browser window, and not by the screen resolution. The browser window is even smaller than the screen. And what is the screen size of the mobile version of the layout, including the height? And what are the dimensions for each landing screen if we design for screens with a resolution of 1024x768 1280x1024 1366x768 1440 and more. Also for tablets and phones. What size options are there for each landing screen?

Answer 1

By the way, this is a very correct and important question, on which there is negligibly little information on the Internet. Everywhere you go - everyone gives advice about the width of the screen, but there is almost no advice about the height of the advice. There is something like "do no higher than 600px" and you can say everything.
The reason for this state of affairs is simple - you are tormented so finely to fine-tune the design. Here you voiced 4 widths - monique, laptop, tablet and mobile. Now multiply that by the height options. And if you also remember that users can resize the browser window, you will go crazy. Therefore, it is advised to make the height for desktop browsers around 600-800px, and for mobile - 400-500.
To simplify the task, we reduce the number of width options. You do only two - for large screens (monique, laptop, tablet - 1000-1200px) and for small ones (smartphones - 320-360, Apple with its 375 is going through the forest here). Accordingly, you assign a height of 600-800 to the first width, and 400-50 to the second.
What Vadim Belkin advises is possible only with a good understanding between the designer and the developer, and continuous quality control of the result. Otherwise, you will ask the developer to make the view rubbery, and everything will be compressed in the end if the browser window is too small for the content available on the site. In such cases, let an extra scroll be better.

Answer 2

CSS has vw (viewport width) and vh (viewport height) units. This is better than setting it in pixels for each screen, once setting the height of the width: 100vh block, it will be equal to 100% of the viewport height on any screen. Read, for example, here Of course, if their browser support
suits you