最近在接触淘宝千牛手机端的开发工作，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类名即可。
新闻热点
疑难解答
