Slicy 发布简化响应式开发的 adapt.js 插件

adapt.js 最初是切图网方便内部开发弄的一款响应式开发插件，可以简化你的响应式工作，支持4种常规分辨率响应，hd、desktop、flatbed、phone 。

常规写法：

@media(min-width:1250px) and (max-width:1921px) {
    body{ background:red;} /*宽屏下背景是红色*/

}
@media(min-width:980px) and (max-width:1300px) {
    body{ background:blue;} /*普屏下背景是蓝色*/

}
@media(min-width:768px) and (max-width:960px) {
    body{ background:green;} /*平板下背景是绿色*/

}
@media(max-width:768px){
    body{ background:gray;} /*手机下背景是灰色*/


}

并且如果使用 adapt.js的话，可以无需写繁琐的css3多媒体查询代码。

引用方式

<!--依赖jQuery文件-->
<script src="js/jquery-1.3.2.min.js"></script> 

<!--adapt.js核心文件-->
<script src="js/adapt.js"></script>
adapt.js写法：

.hd body{ background:red;} /*宽屏下背景是红色*/
.desktop body{ background:blue;} /*普屏下背景是蓝色*/
.flatbed body{ background:green;} /*平板下背景是绿色*/
.phone body{ background:gray;} /*手机下背景是灰色*/
adapt.js其他妙用（针对不同浏览器调整兼容性）：

html.ie6 body{ background:red; }
html.ie7 body{ background:blue; }
html.ie8 body{ background:#000; }
html.firefox body{ background:#111; }
html.chrome body{ background:#222; }
html.safari body{ background:#333; }

本文来自开源中国社区 [http://www.oschina.net]