专栏首页前端之攻略web app 不同屏幕都显示正方形 原

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,设置高度等于宽度,但是样式显示会用问题,最后直接赋值。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Leetcode-Medium 6. ZigZag Conversion

    字符串“PAYPALISHIRING”以Z字形图案写在给定数量的行上,如下所示:(您可能希望以固定字体显示此图案以获得更好的易读性):

    致Great
  • 洛谷P4719 【模板】动态dp(ddp LCT)

    attack
  • SPOJ GSS3 (动态dp)

    设\(f[i]\)表示以\(i\)为结尾的最大子段和,\(g[i]\)表示\(1-i\)的最大子段和

    attack
  • Echarts堆叠折线图ajax获取数据展示

    祈澈菇凉
  • Java 异常的捕捉 try...catch语句

    用户2965768
  • PHP | 顺序结构、条件结构、循环结构 知识梳理与运用实例

    demo: 如果我们需要提供上课的提示信息,假设如果为周一则上午有课,如果为周三则下午有课,其它时间没课。

    凌川江雪
  • 如何成为AI专家

    人工智能在过去十年中发展迅速。你已经看到它在你眼前展开了。从自动驾驶汽车到谷歌,人工智能一直是这些惊人的巨大影响项目的核心。

    Java架构师历程
  • HDU 2767 Proving Equivalences(强连通+缩点)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2767

    Ch_Zaqdt
  • 无人驾驶汽车和寻找真正的AI

    “为了达到我们拥有真正的人工智能的程度,我们还有很长的路要走。我们甚至都不接近,AI领域的研究人员知道,”英特尔Raveen Nao说。

    Java架构师历程
  • 使用Python的四种机器学习技术

    虽然本教程专门用于Python中的机器学习技术,但我们很快就会转向算法。但在我们开始关注技术和算法之前,让我们看看它们是否是同一个东西。

    Java架构师历程

扫码关注云+社区

领取腾讯云代金券