使用css3的@media属性实现页面响应式布局

以最简单的header为例 直接上代码

<!DOCTYPE HTML>
<head>
  <script src="jquery-1.8.2.min.js"></script>
	
<style>


* {
	margin:0;
	padding:0;
}
.ul {
	
	background-color:rgb(134, 170, 209);
	height: 55px;
}
.ul li {
	float:left;
	list-style: none;
	background-color:rgb(134, 170, 209);
	width: 20%;
	height: 100%;
}
.item {
	display: block;
	text-align:center;
	line-height: 49px;
	height: 100%;
	transition: all 0.5s;
	-moz-transition: all 0.5s;	/* Firefox 4 */
	-webkit-transition: all 0.5s;	/* Safari 和 Chrome */
	-o-transition: all 0.5s;
	cursor:pointer;
}
.item:hover {
	background-color:rgb(168, 209, 253);
	
	
}
@media only screen and (max-width: 400px) {

	.ul li {
	
	    width: 100%;
	    height: 100%;
	
	}	
	
}
</style>
<script>


</script>
</head>
<body class="sapUiBody">
<header>
  	<ul class="ul">
		<li><a class="item">Home</a></li>
		<li><a class="item">First</a></li>
		<li><a class="item">Second</a></li>
		<li><a class="item">Thirdly</a></li>
		<li><a class="item">Fourth</a></li>
	</ul>
	</header>
</body>

注意的是@media属性必须写在下面,从而覆盖上面的css



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值