Как сверстать кроссбраузерный адаптивный сайт?

Question

[Роман Кожевников]

Хочу сверстать адаптивный дизайн без использования Bootstrap. То есть первый блок должен растягиваться на весь экран, второй блок - начинаться там, где кончается первый. В CSS3 для этого есть единицы высоты vh. Но я даже не смог найти список браузеров, которые это поддерживают. А для остальных нужен фикс. Я подумал: пусть в старый браузерах сайт не будет адаптивным. Вставил скрипт

<script type="text/javascript">
var header = $(".header").css("height", "100vh");
if (header.height() == 0) percentage.addClass("fail");
</script>

задал всё кроме высоты header-у и высоту fail-у. Не работает.

Как написать, что если браузер не является одним из поддерживающих CSS3 (кстати, какие поддерживают vh?) - задать px вместо vh?

Как можно сделать верхний блок подобным Bootstrapовскому при помощи JavaScript?

Answer 1

[Сергей Горячев]

Господи, откуда это??? Достаточно сделать:

html, body { width: 100%; height: 100%; }
.ekran1 { width: 100%; height: 100%; }
.ekran2 { width: 100%; height: 100%; }

jsfiddle.net/cr06rzqb

ekran2, ekran3 и так далее можно задавать любым размером.

Answer 2

[Eduards Vigulis]

Браузеры которые поддерживают vh: caniuse.com/#search=vh
Как узнать является ли браузер одним из поддерживающих CSS3: https://modernizr.com/