《JS库与响应式设计.ppt》由会员分享，可在线阅读，更多相关《JS库与响应式设计.ppt（18页珍藏版）》请在三一办公上搜索。
1、JS库、响应式设计与CSS3效果,华欣世纪,建立js库的好处,效率性,生产力,正确性,非属人性,只要为了工作订下一定的作业模式和标准，就可以放心把工作交给别人，不管由谁来执行，都可以达到一样的成果。,一旦模式化，即使忘记也没有关系，因为记忆已经以模式的方式保存下来，随时可以再度使用。,只需花费25%的时间就可以解决75%的例行公事，而剩余75%的时间则可投注在25%的高附加价值业务。,只要有东西可范本可循，就不必每次从零开始，也无须一再地重新回想，工作效率自然提高。,建立及维护JS库集合,来源,要求,维护,自4月27号起，每名前端人员每日发送两个JS插件到处审核，通过后上传服务器共用。,上传的
2、插件，除必要的js或css文件外，须附上对应的帮助文档（API）。,网上资源，自创。,响应式网页设计,小屏幕+中屏幕+大屏幕,什么是响应式网页设计,响应式网页设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。,无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个
3、网站能够兼容多个终端而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。,响应式网页设计的优缺,1.对老旧和非标准浏览器的兼容性较差 2.对产品定义和设计能力的要求较高 3.对页面做出调整时 需要同时改变多种尺寸下的布局,优点,缺点,1.面对不同分辨率设备灵活性强2.能够快捷解决多设备显示适应问题,响应式网页设计案例,用Media Query（媒介查询）实现,media(min-device-width:1024px)and(max-width:989px)，screen and(max-device-width:480px)，(max-devic
4、e-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样式。,优雅降级与渐进增强,一开始就构建站点的完整功能，然后针对浏览器测试和修复。优雅降级需
5、要正确地体现HTML标签的语义，符合“浏览器的预期”。让你的网页在各种情况下包括降级（javascript被禁用，css传输失败等等）的情形都可以运作良好。,优雅降级,渐进增强,优雅降级与渐进增强,一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。我们可以对使用现代浏览器的用户给予更好的体验。针对更现代的浏览器（通常这意味着更高的用户配置）做相应增强，并且不会影响旧浏览器的正常运行，大概就是渐进增强的意义吧。,优雅降级,渐进增强,css3-font-face,font-face font-family:diyfont;src:url(diyfont.eot);/*IE9+*/src:u
6、rl(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,iOS 4.2+*/url(diyfont.svg#fontname)format(svg);/*iOS 4.1-*/header nav lifont-faily:diyfont;,font-face是CSS3中的一个模块，他主要是把自己定义
7、的Web字体嵌入到你的网页中，随着font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体了。,css3-border-radius,width:200px;height:100px;border:1px solid#f00;,基础图形,应用一,应用二,应用三,border-top-left-radius:50px;,border-radius:200px 50px 50px 50px/100px 50px 50px 50px;,border-radius:200px/100px,css3-text-shadow,css3-transform,transform:r
8、otate|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,keyframes animations30%transform:translate(160px);opa
9、city:0;50%transform:translate(130px);opacity:1;70%transform:translate(125px);opacity:1;100%transform:translate(100px);opacity:0;.a3animation:animations3 2s ease-out 2s;,css3-transition,transition：transition-property|transition-duration|transition-timing-function|transition-delay,transition:border-color.5s ease-in.1s,background-color.5s ease-in.1s,color.5s ease-in.1s;,css3制作的效果,谢谢!,
