2019年12月27日

快速前端切图css框架,quickly发布1.4版本


快速前端切图css框架,quickly发布1.4版本

演示地址

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{} /*子元素*/

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732