[learner]

Я только собираюсь учить JS и практически ничего не знаю по этой теме, прошу помочь в одном вопросе
Его суть, - существует некий nav:
HTML:

<div id="page">
	<div id="wrap">
		<nav id="nav">
			<ul> 
				<li><a></a></li>
				<li><a></a></li> 
				<li><a></a></li> 
				<li><a></a></li> 
				<li><a></a></li>
			</ul>
		</nav>
	</div>
</div>

CSS:

#page { 
      max-width: 100em;  /*1em=10px*/
      margin: 0 auto;
}

#wrap { 
      width: 92%;
      margin: 0 auto;;
}

#nav {
      height: 5.5em;
}
        
#nav li {
      width: 20%;
      height: 5.5em;
      float: left;
}

При ширине экрана в 320рх я его переворачиваю:

@media (max-width: 320px) {
	#nav {
		height: 20px;
		position: fixed;
		top: 0;
		left: 0;
		transform-origin: 0 0;
		transform: translateX(20px) rotate(90deg);
	}

	#nav li {
		height: 20px;
	}
}

Задача стояла, как сделать nav резиновым по отношению к высоте окна, можно написать #nav{width: 100vh;}, но единицы vw и vh не кроссбраузерное решение.
Нашёл здесь на форуме такой ответ на вопрос, как присвоить высоте div значение window.innerHeight.

<script type="text/javascript">
    onload = function() {
        var div  = document.getElementById("nav");
        var html = document.documentElement;
        div.style.height = html.clientHeight + "px";
              
        onresize = function() {
            div.style.height = html.clientHeight + "px";
        };
    }
</script>

Переписал скрипт вот так:

<script type="text/javascript">
    onload = function() {
            var div  = document.getElementById("nav");
            var html = document.documentElement;
            div.style.width = html.clientHeight + "px";
              
            onresize = function() {
                div.style.width = html.clientHeight + "px";
            };
       }
</script>

И вот так:

<script type="text/javascript">
        onload = function() {
            var div  = document.getElementById("nav");
            var html = document.documentElement;
            div.style.width = window.innerHeight + "px";
              
            onresize = function() {
                div.style.width = window.innerHeight + "px";
            };
       }
</script>

И оба моих варианта работают во всех браузерах FF, Chrome, Safari, Opera, IE9. Но есть два вопроса, во-первых, как сделать так, чтобы скрипт срабатывал только при медиа-запросе и только при ширине окна 320px и меньше и во-вторых, какой из двух моих вариантов скрипта надёжней, если так можно выразиться. Надеюсь на ответ.