在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,设置高度等于宽度,但是样式显示会用问题,最后直接赋值。
(adsbygoogle = window.adsbygoogle || []).push({});