JS库与响应式设计.pptVIP

JS库、响应式设计与CSS3效果 华欣世纪 建立js库的好处 建立及维护JS库集合 响应式网页设计 什么是响应式网页设计 响应式网页设计的优缺 响应式网页设计案例 用Media Query（媒介查询）实现 优雅降级与渐进增强 优雅降级与渐进增强 css3-@font-face css3-border-radius css3-text-shadow css3-transform css3-@animation css3-@transition css3制作的效果 * 效率性 生产力 正确性 非属人性 只要为了工作订下一定的作业模式和标准，就可以放心把工作交给别人，不管由谁来执行，都可以达到一样的成果。 一旦模式化，即使忘记也没有关系，因为记忆已经以模式的方式保存下来，随时可以再度使用。 只需花费25%的时间就可以解决75%的例行公事，而剩余75%的时间则可投注在25%的高附加价值业务。 只要有东西可范本可循，就不必每次从零开始，也无须一再地重新回想，工作效率自然提高。 来源 要求 维护 自4月27号起，每名前端人员每日发送两个JS插件到1343460872@处审核，通过后上传服务器共用。 上传的插件，除必要的js或css文件外，须附上对应的帮助文档（API）。 网上资源，自创。 小屏幕 + 中屏幕 + 大屏幕 响应式网页设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。 无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。 1. 对老旧和非标准浏览器的兼容性较差 2. 对产品定义和设计能力的要求较高 3. 对页面做出调整时 需要同时改变多种尺寸下的布局 优点 缺点 1. 面对不同分辨率设备灵活性强 2. 能够快捷解决多设备显示适应问题 @media (min-device-width:1024px) and (max-width:989px)，screen and (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传输失败等等）的情形都可以运作良好。 优雅降级 渐进增强 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。 我们可以对使用现代浏览器的用户给予更好的体验。针对更现代的浏览器（通常这意味着更高的用户配置）做相应增强，并且不会影响旧浏览器的正常运行，大概就是渐进增强的意义吧。 优雅降级 渐进增强 @font-face { font-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, iOS 4.2+*/ url(diyfont.svg#fontname) format(svg); /* iOS 4.1- */ } header nav li{ font-faily:diyfont;