响应式布局开头篇

第一步:流式布局

  实例======》

<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" />

 




posted @ 2015-12-08 19:19  回眸之殇  阅读(204)  评论(0编辑  收藏  举报