web app 不一样屏幕都显示正方形

 在web app 中每每每一个模块在不一样屏幕时都是正方形，我是用js来实现的

<ul class="menu-ul">
		<li>
		   <a href="selectVillage.html">
				<dl>
					<dt class="menu-blue"><i class="fa fa-gear (alias)"></i></dt>
					<dd>11</dd>
				</dl>
			</a>
		</li>
		<li>
		<a href="selectVillage1.html">
			<dl>
				<dt class="menu-green"><i class="fa fa-play-circle-o" style="font-size:27px;"></i></dt>
				<dd>12</dd>
			</dl>
		</a>	
		</li>
		<li>
		<a href="saomiaoYonghu.html">
			<dl>
				<dt class="menu-green2"><i class="fa fa-caret-square-o-right"></i></dt>
				<dd>13</dd>
			</dl>
		</a>	
		</li>
</ul>

.out-menu-ul{margin-left:-10px;margin-right:-12px;}
.menu-ul{padding-bottom:1px;overflow:hidden;}
.menu-ul li{width:33.333333333333%;float:left;text-align:center;border:1px solid #ddd;margin-right:-1px; margin-bottom:-1px;}

<script type="text/javascript">

   $(function() {
		 $(".menu-ul li").height($(".menu-ul li").width());
		 window.onresize=function(){
			$(".menu-ul li").height($(".menu-ul li").width());
		 }
	//	var w = $(window).width();js 兼容写法
	//	$("html").css("font-size",w/4.14)
	
    //var w=window.innerWidth
    //|| document.documentElement.clientWidth
    //|| document.body.clientWidth;
    //alert(w);
  });
</script>

刚开始我是用each循环每一个div,设置高度等于宽度，可是样式显示会用问题，最后直接赋值。