根据屏幕尺寸划分CSS菜单元素的算法

Question

我正在为我的个人作品集制作一个主菜单页面。它在调整宽度时保持适当的间距，我有一个自定义的移动布局。但是，调整高度会使整个页面看起来很糟糕。

我整天都在努力使元素空间正确，但我似乎无法想出正确的算法：

注意：这会在页面刷新时触发。当你在全屏幕上看到这个问题时更有意义，所以JSFiddle链接可能比运行下面的代码更好。

		 //Instantiate window width and height
		var h = $(window).height();
		var w = $(window).width();

		 //Calculate margins between each box
		var boxmargin = String(55) + "px";
		$(".bmenu").children('li').children('a').children('p').css("margin-bottom", boxmargin);
		$("#triangleoverlay").css("overflow", "hidden");

		 //Calculate left positioning of container so left edge is hidden
		 //var lefthide = String( (1/h)*10000 )+"%";
		 //$(".bmenu").css("right", lefthide);

		 //Calculate box endpoints (start with max, end with 0)
		var boxwidth1 = String((h / 2.9594202898550726) / (1019 / h));
		$(".bmenu").children('li:first-child').children('a').children('p').css("padding-left", boxwidth1 + "px");
		var boxwidth2 = String(Number(boxwidth1) * 1.2028985507246377);
		$(".bmenu").children('li:nth-child(2)').children('a').children('p').css("padding-left", boxwidth2 + "px");
		var boxwidth3 = String(Number(boxwidth2) * 1.2771084337349397);
		$(".bmenu").children('li:nth-child(3)').children('a').children('p').css("padding-left", boxwidth3 + "px");
		var boxwidth4 = String(Number(boxwidth3) * 1.179245283018868);
		$(".bmenu").children('li:nth-child(4)').children('a').children('p').css("padding-left", boxwidth4 + "px");

#triangleoverlay {
  position: relative;
  z-index: 100;
}
#logo {
  margin-left: 110px;
  margin-top: 20px;
}
#title {
  margin-top: 320px !important;
  margin-left: 45%;
  height: 60%;
  position: absolute;
}
.bmenu li a p {
  display: inline-block;
  border-radius: 25px;
  font-size: 20px;
  text-transform: uppercase;
  text-shadow: 0px 0px 2px #000000;
  color: #ffffff;
  padding: 35px;
  margin: 2px;
  padding-right: 200px;
  background: rgba(27, 43, 64, 0.7);
  letter-spacing: 1px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.bmenu:hover li a p {
  text-shadow: 0px 0px 2px #ffffff;
  color: transparent;
  background: rgba(27, 43, 64, 0.2);
}
.bmenu li a:hover p {
  background: rgba(27, 43, 64, 1.0);
  text-shadow: 0px 0px 0px #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader-wrapper">
  <div class="loader-section"></div>
  <div id="loader"></div>
</div>

<div id='main'>
  <div id='triangle'>
    <svg class="slider-post-slanting" viewBox="0 0 1620 1620" height="100%" preserveAspectRatio="xMaxYMax slice" style="position:absolute; bottom: 0px;">
      <polygon opacity="0.7" fill="#2F4C6F" points="1600,1620 0,1620 0,0 500,0 "></polygon>
    </svg>
    <div id="triangleoverlay" style="position:absolute; height:100%">
      <img id="logo" height="100px" src="./images/logoinverted.png" />
      <ul class="bmenu" style="top:25%; right:7%; position:relative; list-style-type:none;">
        <li>
          <a href="about.html">
            <p>About Me</p>
          </a>
        </li>
        <li>
          <a href="portfolio.html">
            <p>Portfolio</p>
          </a>
        </li>
        <li>
          <a href="resume.html">
            <p>Resume</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p>Contact</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <img src="./images/titlenosub.png" id="title">
  </div>
</div>

JSFiddle传入： http://jsfiddle.net/bq72ukc8/1/