zoukankan      html  css  js  c++  java
  • 关于最近写淘宝手机业务对于框架的感想

    最近在接触淘宝千牛手机端的开发工作,SUI Mobile 是一套基于 FrameWork 开发的UI库。

    但是个人觉得整个框架整理的还是有很多不合理的,在开发之余还是抽空把整合的东西整理出来(顺便结合别人的知识做出修改)。

    在兼容处理上,对苹果6以下的兼容有的地方处理的不是很好。需要单独写一些css来调整一下,下面是个人总结的针对苹果手机的分辨率来写的hack

    /* 兼容iphone4/4s */
    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
    }
    /* 兼容iphone5 */
    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
    }
     
    /*iphone 6竖屏*/
    @media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : portrait) {
     
    }
    /*iphone6+竖屏*/
    @media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : portrait) {
     
    }
    /*iphone 6横屏*/ 
    @media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : landscape) {
         
    }
    /*iphone 6+横屏*/ 
    @media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : landscape) {
         
    }
    @media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px){
         
    }

    @media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : portrait){
      
    }

    @media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : landscape){
      
    }
    以上的代码不需要做过多的解释了吧!稍微有点前端css基础的都知道如何去使用它的。
     
    其二,涉及到专场动画这一块,嗯,参考了animated.css的动画效果,提取了出来,毕竟,手机端的东西,加载速度是很有必要的,把需要的提取出来吧。左右转场的动画效果,css代码如下:
    /*转场场动画*/
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    @-webkit-keyframes fadeInLeft {
            0% {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    
    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    
    .fadeInLeft {
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
    }
    @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    
    @keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    
    .fadeInRight {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
    }    

    下面就是利用js来对需要的部分来进行加载了!顺带一提的是,.animated可以预先卸载节点内,动态加入需要的动画css类名即可。

  • 相关阅读:
    SQL 数据库备份
    压力测试工具WAS
    petshop4.0 详解之八(PetShop表示层设计
    类库生成的dll 添加 注释
    硬盘格式化后 数据全部找回
    petshop4.0 详解之七(PetShop表示层设计)
    JS 显示动态更新时间
    petshop4.0 详解之六(PetShop表示层设计)
    在linux环境下搭建嵌入式开发平台
    收录 Uboot 详解
  • 原文地址:https://www.cnblogs.com/saodiseng/p/4700283.html
Copyright © 2011-2022 走看看