How to make a cross-browser responsive website?

Question

css

I want to make a responsive design without using Bootstrap. That is, the first block should stretch to full screen, the second block should start where the first one ends. CSS3 has vh height units for this. But I couldn't even find a list of browsers that support it. And for the rest you need a fix. I thought: let the site not be adaptive in old browsers. Pasted the script

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

set everything except header height and fail height. Does not work.
How to write that if the browser is not one of those supporting CSS3 (by the way, which ones support vh?) - set px instead of vh?
How can I make the top block look like Bootstrap's using JavaScript?

Answer 1

Lord, where is this from??? It is enough to do:

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

jsfiddle.net/cr06rzqb
ekran2, ekran3 and so on can be set to any size.

Answer 2

Browsers that support vh: caniuse.com/#search=vh
How to find out if a browser is one of those supporting CSS3: https://modernizr.com/