Как рассчитать высоту каждого экрана лендинга?

Question

[arturishkildinsurgut]

Мне нужно сделать дизайн макета сайта на несколько разрешений экранов - для настольных мониторов, ноутбуков, планшетов, телефонов. Если брать макет сайта для экранов 1024х768 пикселей, то получается, что первый экран лендинга должен быть 768 пикселей в высоту, так? Или меньше - мы же должны ориентироваться по размеру окна браузера, а не по разрешению экрана. Окно браузера по размеру еще меньше экрана. И какой размер у экрана мобильной версии макета, в том числе высота? И какие есть вообще размеры для каждого экрана лендинга, если делаем дизайн для экранов с разрешением 1024х768 1280х1024 1366х768 1440 и больше. И еще для планшетов и телефонов. Какие есть вообще варианты размеров каждого экрана лендинга?

Answer 1

[Нерон Лордов]

Кстати вот это очень правильный и важный вопрос, по которому информации в инете пренебрежительно мало. Куда не сунься - все дают советы насчет ширины экрана, а вот насчёт высоты советов почти что и нет. Есть что-то вроде "делай не выше 600рх" и можно сказать всё.

Причина такому положению вещей простая - замучаешься ты так тонко настраивать дизайн. Вот ты озвучил 4 ширины - моник, ноут, планшет и мобила. Теперь помножь это на варианты высот. А если еще вспомнить, что окошко браузера юзеры могут ресайзить - рехнёшься. Поэтому и советуют делать высоту для настольных браузеров в районе 600-800рх, а для мобильных - 400-500.

Чтобы упростить задачу - сокращаем количество вариантов ширины. Делаешь только два - для больших экранов (моник, ноут, планшет - 1000-1200рх) и для маленьких (смартфоны - 320-360, эппл со своими 375 тут идёт лесом). Соответственно первой ширине присваиваешь высоту 600-800, а второй - 400-50.

То, что советует Вадим Белкин возможно лишь при хорошом взаимопонимании дизайнера и разработчика, и непрерывном контроле качества результата. А иначе попросишь разраба сделать вьюху резиновой, да и спрессуется всё в итоге, если окошко браузера будет чересчур малым для имеющегося на сайте контента. В таких случаях пусть уж лучше будет лишний скролл.

Answer 2

[Вадим Белкин]

В CSS есть единицы измерения vw (ширина вьюпорта) и vh (высота вьюпорта). Это лучше чем под каждый экран в пикселях задавать, один раз задав высоту блоку width: 100vh он у вас на любом экране будет равен 100% высоты вьюпорта. Почитайте, например тут
Конечно же если вам подходит их поддержка браузерами