响应式
响应式
hey--老妖 发表于1年前
响应式
  • 发表于 1年前
  • 阅读 15
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式</title>  
		<!-- 当前屏幕的宽高,为当前设备的宽度,按比例缩放 -->                 
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="css/style.css">
	<style>
		
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="content">
		<div class="left"></div>
		<div class="main"></div>
		<div class="right"></div>
	</div>
	<div class="footer"></div>
</body>
</html>
*{
	padding: 0px;
	margin: 0px;
}
.header,
.content,
.footer{
	margin: 10px auto;

}
.header{
	height: 100px;
	background-color: yellow;
}
.left,
.main,
.right{
	background-color: black;
}
.footer{
	height: 100px;
	background-color:red ;
}
/* 960*/
@media screen and (min-width: 960px){
	.header,
	.content,
	.footer{
		width: 960px; 
	}
	.left,
	.main,
	.right{
		float: left;
		height: 500px;
	}
	.left,
	.right{
		width: 200px;
	}
	.main{
		margin-left: 5px;
		margin-right: 5px;
		width: 550px;
	}
	.content{
		height: 500px;
	}
}
/* 600-960 */
@media screen and (min-width: 600px) and (max-width: 960px){
	.header,
	.content,
	.footer{
		width: 600px;
	}
	.left,
	.main{
		float: left;
		height: 400px;
	}
	.right{
		display: none;
	}
	.left{
		width: 160px;
	}
	.main{
		width: 435px;
		margin-left: 5px;
	}
	.content{
		height: 400px;
	}
}
/* 600以下 */
@media screen and (max-width: 600px){
	.header,
	.content,
	.footer{
		width: 400px;
	}
	.left,
	.right{
		width: 400px;
		height: 100px;
	}
	.main{
		margin-top: 10px;
		width: 400px;
		height: 200px
	}
	.right{
		margin-top: 10px;
	}
	.content{
		height: 420px;
	}
}

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 3
博文 37
码字总数 21133
×
hey--老妖
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: