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

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》