登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

响应式web设计之CSS3 Media 代码精简技巧

2016-06-17 17:05:37 | 浏览量:325 css3

比如有这样一个页面,在浏览器窗口超过1024px时,banner图片2个,左右并列展示,头部导航横向展示;当窗口在700px以下时,由于宽度不够,2个banner图片无法并列显示,需要变成上下展示。当窗口在400p以下时,导航内容已经展示不下了,需要隐藏,只显示一个导航链接,用户点击再展示出导航内容,即手机页面常用的交互方式。

以下时一种实现这样功能的代码:


@media screen and (min-width:1025px)  {
	.banner1 {
		float: left;
		width: 50%;
	}
	.banner2 {
		float: right;
		width: 50%;
	}
}
@media screen and (min-width:701px) and (max-width:1024px) {
	.banner1 {
		float: none;
		width: 100%;
	}
	.banner2 {
		float: none;
		width: 100%;
	}
}
@media screen and (min-width:401px) and (max-width:700px) {
	.banner1 {
		float: none;
		width: 100%;
	}
	.banner2 {
		float: none;
		width: 100%;
	}
}
@media screen and (max-width:400px) {
	.banner1 {
		float: none;
		width: 100%;
	}
	.banner2 {
		float: none;
		width: 100%;
	}
	/*对导航的处理*/
	.main-header {
		display: none;
	}
	.m-header {
		display: block;
	}
}


以上代码可以实现想要的效果,但是多了不少多余的代码。

可以考虑采用下面的方法来实现:


@media screen and (min-width:1025px)  {
	.banner1 {
		float: left;
		width: 50%;
	}
	.banner2 {
		float: right;
		width: 50%;
	}
}
@media screen and (max-width:1024px) {
	.banner1 {
		float: none;
		width: 100%;
	}
	.banner2 {
		float: none;
		width: 100%;
	}
}
@media screen and (max-width:400px) {
	.main-header {
		display: none;
	}
}


这样就可以利用代码覆盖的特性,重用一部代码。这里只是举了一个简单的例子,在实际项目中,会有更复杂的代码,灵活应用这个思路,可以节约大量代码量。

需求及问题提交:

点击图片更换数字

0.4932s