How to adapt fullscreen?

Question

css

I often see full-screen sections in landing page layouts. Usually, to adapt content elsewhere on the site, it is enough to write media screen and (max-width: ...), but this will not work with fullscreens, because the content directly depends on the height. So, on mobile resolution, the height / width is most often left for the entire screen, or at a certain point, for example, at 768px, should such a block be made according to the height of the content, and not to the entire height of the screen?
It is interesting to listen to knowledgeable people, because I don’t want to do it all the time through some crutches and hope that it will be displayed equally well on various devices. Because I personally have difficulties with adaptation, because you need to take into account the dimensions of not only the width, but also the height, and the ratio of height to width, etc.
Thank you!

Answer 1

There are a lot of approaches, in fact. It all depends on how this first screen is designed, what can be hidden and moved. In most cases, some of the problems go away if you set not height, but min-height and do not position the insides absolutely, but use the same flexes, usually on the first screen there is some kind of strip on top, some picture in the center, and some strip from below - this method works quite well even without taking into account the orientation of the device