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

内容简介：演示地址 http://www.qietu.com/quickly/v1.4/ 关于框架 quicklyCSS框架曾用名 ThinkCSS,QuickCSS ，是武汉切图网络技术有限公司（简称切图网）基于多年前端外包经验开发的一套快速响应式切图框架。 更新记录 增加...

演示地址

http://www.qietu.com/quickly/v1.4/

关于框架

quicklyCSS框架曾用名 ThinkCSS,QuickCSS ，是武汉切图网络技术有限公司（简称切图网）基于多年前端外包经验开发的一套快速响应式切图框架。

更新记录

增加了html基值的设置，采用rem重置了字体大小

重新定义了响应式区间

1. /* 电脑大屏--lg*/
2. .qui-wrapper{
3. width: 1170px;
4. }
5. /* 电脑小屏--md */
6. @media screen and (max-width:1200px){
7. .qui-wrapper{
8. width: 970px;
9. }
10. }
11. /* 平板--sm */
12. @media screen and (max-width:992px){
13. .qui-wrapper{
14. width: 750px;
15. }
16. }
17. /* 手机 xs*/
18. @media screen and (max-width:768px){
19. .qui-wrapper{
20. width: 100%;
21. }
22. }

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 前端技术演进（五）：现代前端交互框架
• 重学前端学习笔记（三）--前端知识框架图
• 2020 前端框架测评总结
• [原]前端框架们
• 响应式前端框架
• 前端单元测试框架梳理

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。