How to develop responsive design?

Question

User interface

Good afternoon!
There is a website - https://qlean.ru. If you open this site on a 13 inch Macbook screen in Safari, the site header (big picture) ends up perfectly to fit the screen. At the same time, if you open the same site on the same screen in Chrome (which has a control panel higher than that of Safari by several tens of pixels), then the header also ideally ends on the screen. The same applies to other larger diagonals. Please explain, is it necessary to draw a lot of layouts for different diagonals in order to get such a clear adaptive or is everything easier? How to achieve the same result when designing your own website? If it's possible, please explain it in as much detail as possible for a beginner :)
Thank you very much!

Answer 1

then the cap also ends perfectly on the screen

What hat? "First screen" in the sense?
This is a block with a height:

.screen1 {
    height: 100vh;
}

With a background image.

Answer 2

If the author of the question is a designer, then you need to know the basics of css in order to understand in Photoshop how and from where the picture should be scaled for adequate display on different screens. Well, draw different options with it: make the picture a smart object, draw several hats of different sizes and see how it behaves. But this is if you are smart and well done, usually everyone scores. And it's bad if you want to work at a higher level than "everyone" and earn more than them.