adapt.js

响应式开发插件,简化你的响应式工作,支持4种常规分辨率响应,hd、desktop、flatbed、phone , 最简单的运用,改变本网页的宽度,查看右上角的小圆点变化。
ad~学web切图实战上切图学院

常规写法:

@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; }