`

关于自适应布局的一点总结

 
阅读更多

      css布局我想是经常困扰初学前端者的一个问题,至于我,也是初入门槛。在闲暇时间,就喜欢自个儿琢磨,自己也就是这样不断地进步的。我想经过不断的学习,前端技能肯定会更上一层楼的。

      今天就浅谈下css的自适应布局吧。

      所谓自适应布局,现在的浅显地认为就是百分比布局,它能随着浏览器窗口的缩放而自行改变其宽度和高度。当然也可以只设定宽度自适应或者高度自适应等。

      由于本人做的是移动端的开发,在输出页面的时候是限制页面的宽度的。而本次自适应布局也是在此限制下进行的。

      基本的实现是:在浏览器可见范围内输出两部分文档,分别实现自适应布局,即最终结果为,两部分段落能随着浏览器的缩放自动调整宽度和高度。

      HTML代码如下:

<!doctype html>
<html>
<head>
	<title>浅谈自适应布局</title>
	<meta charset="utf-8"/>
</head>
<body>
	<section class="the_body">
		<ul class="box clearfix">
			<li class="box_lf">
				<p class="the_cont">这是左边的一段文字,这是左边的一段文字,这是左边的一段文字,这是左边的一段文字,这是左边的一段文字,这是左边的一段文字,这是左边的一段文字,这是左边的一段文字,这是左边的一段文字,</p>
			</li>
			<li class="box_rf">
				<p class="the_cont">这是右边的一段文字,这是右边的一段文字,这是右边的一段文字,这是右边的一段文字,这是右边的一段文字,这是右边的一段文字,这是右边的一段文字,这是右边的一段文字,这是右边的一段文字,</p>
			</li>
		</ul>
	</section>
</body>
</html>

 css代码如下:

	html,body,object,iframe,div,span,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dd,dt,dl,img{margin: 0;padding:0;}
	ul,ol,li{list-style: none;}
	img{display: block;}
	.clearfix{zoom:1;clear: both;}
	.clearfix:after{display: block;visibility: hidden;content: "";font-size: 0;clear: both;height: 0;}/* 清除浮动为什么要使用伪类after */
	.the_body{width:100%;min-width: 320px;max-width: 640px;margin: 0 auto;background: #ffd010;overflow: hidden;/* 这里为什么要加overflow */}
	.box{margin: 10px 1.5625%;}
	.box .box_lf{width: 49%;margin-right: 1%;float: left;background: #fff;}
	.box .box_rf{width: 49%;margin-left: 1%;float: left;background: #fff;}
	.box .the_cont{padding:10px 5px;}

       在本次的布局中,还定义了全局样式,主要初始化段落或列表的间距、样式等。也用到了清除浮动的样式,至于清除浮动的样式随后总结。最终的效果如下:


      在这里,我用一个列表来展现这两部分的文本。给ul设置一个margin,上下margin固定为10px,左右margin为百分比,是1/64。在这里不能给每个li设置50%的宽度,因为要给它们一个间距。那么在这里设置li的宽度为49%,距左或距右为1%。为了让文本显示地更美观一些,就给每段文本加了一个内间距(padding:10px 5px;)。

      那么,自适应布局是怎么实现的呢?就是这个百分比的设置,在这里百分比的设置是关键,文本的宽度加上文本的间距刚好是ul的一半,即50%。最后,加一个浮动,让各段文本向左浮动就可以实现了。

      这里的浮动也是一个难点,在之后将会总结。

      另外,再做一些特殊的处理,让文字在一行上显示,并且做出一个溢出则隐藏的效果。

      最终的效果如下:


      上面这张图是在640px下的效果。

      下面这张图是在320px下的效果。

      而实现以上效果,只需对文本添加以下样式:white-space: nowrap;text-overflow:ellipsis;overflow: hidden;。这段css代码是在文本溢出时就隐藏,并以省略号显示。

      对自适应布局的总结暂时就先到这里,现在也只是浅显地总结,随着学习的深入,将进一步总结。酷

  • 大小: 5.1 KB
  • 大小: 1.5 KB
  • 大小: 1.9 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics