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,設置高度等於寬度，可是樣式顯示會用問題，最後直接賦值。