您的位置:首页> 日志> 前端技术 正文
DTOP

弹性布局与响应式设计

红狼哥 | 2015年04月07日 |

>>收藏本文 已有 1条评论

继上次响应式设计应用,这次带给大家的是前端输出中常用到的弹性化布局——兼容IE6+,FF,GG等主流浏览器。弹性布局的实现方式网上就有多种,但都各有优缺点,不一定适用到我们日常的工作中,今天在这里分享个人习惯用的弹性布局,经多年测试,无兼容问题。

如何即简单,兼容性又稳定的实现我们想要的弹性化效果呢?首先直接来个图看看效果:

输出时,最常见到的就是两列或三列的布局形式居多,可部分或全部弹性,弹性盒子里的内容同时也会自动适应啦;来看看如何实现:

<div class="content">
    <div class="side"></div>
    <div class="mainContent"></div>
</div>

  1. .content{overflow:hidden;} 
  2. .side{float:left;width:200px;margin-right:-200px;} 
  3. .mainContent{margin-left:210px;} 

html,css部分就非常简单,这样即可最简化实现,是不是很方便啦,基于这样的效果,我们可以扩展出更多的弹性形式

常用的几种弹性形式


效果一


效果二


效果三


效果四


效果五

弹性布局应用于响应式网站中效果最佳,仅简单设置下宽度就能自动适应各种屏幕尺寸。

为能更快、更容易制作弹性布局,借鉴SuperSlide,开发了一个JS插件(autoAdapt.js)娱乐娱乐下下,内含demo效果,不同尺寸不同配置等功能正在研讨中……

近期项目都有应用,附下载地址:
jquery.autoAdapt.1.0 demo下载