注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梨花寨

 
 
 

日志

 
 
 
 

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

2016-09-19 11:08:04|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

比如有这样一个页面,在浏览器窗口超过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;
}
}

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

更多技术文章


  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018