您所在的位置:小祥子 » 编程 » CSS » 正文

关于最近写淘宝手机业务对于框架的感想

时间:2015-08-03 编辑:扫地僧. 来源:CnBlogs

最近在接触淘宝千牛手机端的开发工作,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-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {   } /*iphone6+竖屏*/ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {   } /*iphone 6横屏*/  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
     
} /*iphone 6+横屏*/  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
     
} @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
     
}

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

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 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类名即可。

关键词:淘宝 手机 框架