quickly 1.4 版本发布,快速前端切图css框架
演示地址 http://www.qietu.com/quickly/v1.4/ 关于框架 quicklyCSS框架曾用名 ThinkCSS,QuickCSS ,是武汉切图网络技术有限公司(简称切图网)基于多年前端外包经验开发的一套快速响应式切图框架。 更新记录 增加了html基值的设置,采用rem重置了字体大小 重新定义了响应式区间 /* 电脑大屏--lg*/ .qui-wrapper{ width: 1170px; } /* 电脑小屏--md */ @media screen and (max-width:1200px){ .qui-wrapper{ width: 970px; } } /* 平板--sm */ @media screen and (max-width:992px){ .qui-wrapper{ width: 750px; } } /* 手机 xs*/ @media screen and (max-width:768px){ .qui-wrapper{ width: 100%; } } 通过font-family定义了数字字体样式 集成了swiper.js滑块插件 /*判断了插件是否存在,无插件的情况不报错*/ if(typeof(Swiper)!= "undefined"){ var swiper = new Swiper('.swiper-container',{ observer:true, //observeParents:true, //slidesPerView: 3, autoplay:4000, pagination: '.swiper-pagination', prevButton:'.swiper-button-prev', nextButton:'.swiper-button-next', //paginationType: 'fraction', //缺省是原点 }); } else{ } 集成了wow.js动画效果插件 /*判断了插件是否存在,无插件的情况不报错*/ if(typeof(WOW)!= "undefined"){ if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; } 基于BEM命名重新设计了组件(尝试) .qui-card{} .qui-card--colorful{} /*修饰符*/ .qui-card__head{} /*子元素*/ .qui-card__body{} /*子元素*/ .qui-card__foot{} /*子元素*/