内容简介：演示地址 http://www.qietu.com/quickly/v1.4/ 关于框架 quicklyCSS框架曾用名 ThinkCSS,QuickCSS ，是武汉切图网络技术有限公司（简称切图网）基于多年前端外包经验开发的一套快速响应式切图框架。 更新记录 增加...
演示地址
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{} /*子元素*/
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
