Лучше всего сделать разбивку согласно стандартным расширениям экрана на несколько групп, аналогично как это сделано в bootstrap по ширине (
https://bootstrap-4.ru/docs/4.1/layout/overview/)
Потом в эту разбивку по высоте проще будет подгонять все страницы и элементы дизайна
например:
Некий блок в верху главной страницы, например с менюшкой или главным слоганом должен красиво смотреться имея разный шрифт, отступ и ширину - будет выглядеть примерно так:
@media screen and (max-height: 600px) {
.div{
font-size:10px;
height:40px;
margin-top:30px;
}
}
@media screen and (min-height: 600px) and (max-height: 768px) {
.div{
font-size:10px;
height:50px;
margin-top:50px;
}
}
@media screen and (min-height: 768px) and (max-height: 960px) {
.div{
font-size:14px;
height:100px;
margin-top:70px;
}
}
@media screen and (min-height: 960px) and (max-height: 1024px) {
.div{
font-size:16px;
height:150px;
margin-top:100px;
}
}
@media screen and (min-height: 1024px) {
.div{
font-size:18px;
height:180px;
margin-top:150px;
}
}
Как правило, чтобы не путаться с плавающими по высоте блоками делают их:
position:absolute; width:100% и задают им
top или
margin-top а уже внутри делают контейнер с плавающей шириной и
margin: 0 auto;. Под эти блоки как правило делают див с фоновой картинкой в размер экрана
section {
position:absolute;
width: 100%; /* ширина секции равна ширине области просмотра */
height: 100vh; /* высота секции равна высоте области просмотра */
}
Из важного: не ленитесь писать
screen, чтобы эти правила распространялись только на экранную разбивку и делайте в конце отдельно
printверсию с совершенно другим дизайном под А4 ;)
Вот пример разбивки блоков по высоте (шапка на главной)
https://cf-dynamite.ru/
Если плавающих по высоте элементов не много (например какойто текст призывающий к действию и кнопка на фоне картинки с весь экран), то можно использовать проценты от высоты экрана
height: XXXvh; и распределить элементы относительными блоками внутри блока с размерами экрана.
Средний
Простой
Средний