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

最新推荐文章于 2020-12-04 15:36:23 发布

码上飞跃

最新推荐文章于 2020-12-04 15:36:23 发布

阅读量263

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/y2010081134/article/details/46868667

版权

web前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

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;）。