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 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 iOS4 2 url diyfont svg fontname format svg iOS4 1 headernavli font 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 keyframesanimations3 0 transform translate 160px opacity 0 50 transform translate 130px opacity 1 70 transform translate 125px opacity 1 100 transform translate 100px opacity 0 a3 animation animations32sease out2s css3 transition transition transition property transition duration transition timing function transition delay transition border color 5sease in 1s background color 5sease in 1s color 5sease in 1s css3制作的效果 谢谢