JS库与响应式设计.ppt

JS库、响应式设计与CSS3效果,华欣世纪,建立js库的好处,效率性,生产力,正确性,非属人性,只要为了工作订下一定的作业模式和标准，就可以放心把工作交给别人，不管由谁来执行，都可以达到一样的成果。,一旦模式化，即使忘记也没有关系，因为记忆已经以模式的方式保存下来，随时可以再度使用。,只需花费25%的时间就可以解决75%的例行公事，而剩余75%的时间则可投注在25%的高附加价值业务。,只要有东西可范本可循，就不必每次从零开始，也无须一再地重新回想，工作效率自然提高。,建立及维护JS库集合,来源,要求,维护,自4月27号起，每名前端人员每日发送两个JS插件到1343460872处审核，通过后上传服务器共用。,上传的插件，除必要的js或css文件外，须附上对应的帮助文档（API）。,网上资源，自创。,响应式网页设计,小屏幕+中屏幕+大屏幕,什么是响应式网页设计,响应式网页设计(ResponsiveWebdesign)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。,无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。,响应式网页设计的优缺,1.对老旧和非标准浏览器的兼容性较差2.对产品定义和设计能力的要求较高3.对页面做出调整时需要同时改变多种尺寸下的布局,优点,缺点,1.面对不同分辨率设备灵活性强2.能够快捷解决多设备显示适应问题,响应式网页设计案例,用MediaQuery（媒介查询）实现,media(min-device-width:1024px)and(max-width:989px)，screenand(max-device-width:480px)，(max-device-width:480px)and(orientation:landscape)，(min-device-width:480px)and(max-device-width:1024px)and(orientation:portrait)srules以上代码设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。,优雅降级与渐进增强,一开始就构建站点的完整功能，然后针对浏览器测试和修复。优雅降级需要正确地体现HTML标签的语义，符合“浏览器的预期”。让你的网页在各种情况下包括降级（javascript被禁用，css传输失败等等）的情形都可以运作良好。,优雅降级,渐进增强,优雅降级与渐进增强,一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。我们可以对使用现代浏览器的用户给予更好的体验。针对更现代的浏览器（通常这意味着更高的用户配置）做相应增强，并且不会影响旧浏览器的正常运行，大概就是渐进增强的意义吧。,优雅降级,渐进增强,css3-font-face,font-facefont-family:diyfont;src:url(diyfont.eot);/*IE9+*/src:url(diyfont.eot?#iefix)format(embedded-opentype),/*IE6-IE8*/url(diyfont.woff)format(woff),/*chrome、firefox*/url(diyfont.ttf)format(truetype),/*chrome、firefox、opera、Safari,Android,iOS4.2+*/url(diyfont.svg#fontname)format(svg);/*iOS4.1-*/headernavlifont-faily:diyfont;,font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体了。,css3-border-radius,width:200px;height:100px;border:1pxsolid#f00;,基础图形,应用一,应用二,应用三,border-top-left-radius:50px;,border-radius:200px50px50px50px/100px50px50px50px;,border-radius:200px/100px,css3-text-shadow,css3-transform,transform:rotate|scale|skew|translate|matrix;,transform-origin:(left,top);,rotate旋转skew扭曲scale缩放translate移动,css3-animation,animation：animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count|animation-direction,keyframesanimations30%transform:translate(160px);opacity:0;50%transform:translate(130px);opacity:1;70%transform:translate(125px);opacity:1;100%transform:translate(100px);opacity:0;.a3animation:animations32sease-out2s;,css3-transition,transition：transition-property|transition-duration|transit