简单实现响应式布局

原创
2015/01/06 17:25
阅读数 64

接触HTML5已有一段时间,今天用到响应式布局,分享一个我自己写的入门程序,希望能够对学习前端的朋友有一点帮助

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>响应式布局</title>
    <style type="text/css">
          .box{
    			height: 100px;
    			color: #000;
    			font-size: 16px;
    			text-align: center;
    			line-height: 100px;
    			float: left;
    		}
    	   .box1{
    			background: red;
    		}
    		.box2{
    			background: orange;
    		}
    		.box3{
    			background: yellow;
    		}
    		 .box4{
    			background: green;
    		}
    	@media(min-width: 768px){
    		.box1{
    			width: 20%;
    		}
    		.box2{
    			width: 60%;
    		}
    		.box3{
    			width: 20%;
    		}
    		 .box4{
    			width: 100%;
    		}
    	}
    	
    	@media (min-width: 372px) and (max-width: 768px) {
    		.box1{
    			width: 50%;
    		}
    		.box2{
    			width: 50%;
    		}
    		.box3{
    			width: 50%;
    		}
    		.box4{
    			width: 50%;
    		}
    	}
    	
    	@media (max-width: 372px) {
    		.box1{
    			width: 100%;
    		}
    		.box2{
    			width: 100%;
    		}
    		.box3{
    			width: 100%;
    		}
    		.box4{
    			width: 100%;
    		}
    	}
    </style>
</head>
<body>
	<div class="wrapper">
		<div class="box box1">box1</div>
		<div class="box box2">box2</div>
		<div class="box box3">box3</div>
		<div class="box box4">box4</div>
	</div>
</body>
</html>


展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部