发布于 2017-02-17 11:26:28 | 69 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

Adapt.js 响应式开发插件

Adapt.js是一个很小的JavaScript文件，它能够根据页面的宽度来加不同的CSS文件。在浏览器渲染一个页面之前，它会检查其宽度然后决定该调用哪一个CSS文件。

---

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://adapt.slicy.cn

（拖拽浏览器宽度，可以查看小圆点颜色变化）

历史版本 :
Slicy 发布简化响应式开发的 adapt.js 插件