码迷,mamicode.com
首页 > 其他好文 > 详细

响应式布局开头篇

时间:2015-12-08 20:29:22      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

第一步:流式布局

  实例======》

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			float: left;
			width: 30%;
			height: 100px;
			margin: 10px;
		}
		#div1{
			background-color: #006699;
		}
		#div2{
			background-color: #ff6666;
		}
		#div3{
			background-color: #ffff00;
		}
	</style>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
</body>




第二部:谋体查询

div{
	float: left;
	width: 30%;
	height: 100px;
	margin: 10px;
}
@media only screen and (max-width: 600px) {
	div{
		width: 95%;
	}
}

第三部:meta标签设置
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 




响应式布局开头篇

标签:

原文地址:http://www.cnblogs.com/yzhong/p/5030694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!