![[译]Efficient, maintainable CSS](https://cdn.slidesharecdn.com/ss_thumbnails/efficient-091215042328-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[2008]网站重构 -who am i](https://cdn.slidesharecdn.com/ss_thumbnails/2008-whoami-100913035744-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (19)
Viewers also liked (10)
Similar to Responsive Web UI Design (20)
More from jay li (15)
Recently uploaded (7)
![[GDG Build with AI] 善用現代 AI 科技：打造專屬行銷工具箱 @ GDG Changhua 彰化](https://cdn.slidesharecdn.com/ss_thumbnails/ai-250526054018-7cb05c2e-thumbnail.jpg?width=560&fit=bounds)
Responsive Web UI Design
- 1. Design & Develop 2012‐04‐13 @jayli F2E & Translator htt[p://jayli.github.com [email protected]
- 3. Responsive Design 要做到对各种终端尺寸的适配 包括这些主流的分辨率 设计/开发工作量非常大！！ Libstat.com,aout 2011
- 5. 样式1 样式2 样式3 更高 分辨 率的 样式
- 6. Best Practice ? 除了字体大小，还需要考虑平台种类、 开发成本、编码难度、代码健壮性和可维护性、 触屏事件的支持、兼容性…. 所以，我们成立了”变色龙小组”… 响应式设计小组 http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:rd
- 7. Topic • 平台选择 • MediaQuery • 文字排版 • 布局 • 图片载入 • Slide组件
- 8. Topic • 平台选择 • MediaQuery • 文字排版 • 布局 • 图片载入 • Slide组件
- 11. ViewPort width=device-width user-scalable=1 initial-scale=1 maximum-scale=1 minimum-scale=1 页面初始化时需要定制viewport属性，viewport主要有这五个
- 13. <meta name="viewport" content=“ width=device-width, initial-scale=1, maximum-scale=1"> 横竖版切换可以重置缩放，但无法手动缩放页面 <meta name="viewport" content=“ width=device-width, initial-scale=1"> 横竖版切换不可以重置缩放，但可以手动缩放页面
- 14. <meta name="viewport" content=“ width=device-width, initial-scale=1, maximum-scale=1"> 横竖版切换可以重置缩放，但无法手动缩放页面 <meta name="viewport" content=“ width=device-width, initial-scale=1"> 横竖版切换不可以重置缩放，但可以手动缩放页面
- 15. apple-mobile-web-app-capable:yes apple-mobile-web-app-status-bar-style:blank format-detection:telephone=no 还有三个重要的属性应当在在页面的meta中定义
- 17. 隐藏状态栏，在设计appUI时可以考虑 状态栏高度为20像素 apple-mobile-web-app-capable:yes apple-mobile-web-app-status-bar-style:blank format-detection:telephone=no
- 18. apple-mobile-web-app-capable:yes apple-mobile-web-app-status-bar-style:blank format-detection:telephone=no Iphone会将看起来像电话号码的 数字添加电话连接，应当关闭
- 19. apple-mobile-web-app-capable:yes apple-mobile-web-app-status-bar-style:blank format-detection:telephone=no <a href=tel:13089888765>13089888765</a> 个别需要识别为电话号码的数字 可以这样开启
- 20. ViewPort “Meta”Code <meta name="viewport" content=“ width=device-width, initial-scale=1, maximum-scale=1"> <meta name=“apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no" /> 因此最终的viewport的定义应当是这样
- 21. “Link” Code <link rel="apple-touch-icon" sizes="57x57" href="icon1.png" /> <link rel="apple-touch-icon" sizes="72x72" href="icon2.png" /> 除了meta之外，link属性也要配置,Iphone和ipad中的图标尺寸为57x57和72x72，iPhone4和new Pad中尺寸翻倍
- 22. New iPad iPad2
- 23. Topic • 平台选择 • MediaQuery • 文字排版 • 布局 • 图片载入 • Slide组件
- 24. /* 正常PC液晶屏样式 */ /* iPad 及以下，所有小于（不等于）960宽度的平板电脑 */ @media only screen and (max-width: 959px) {} /* 仅iPad 竖版，所有小于（不等于）960宽度的平板电脑的竖版 */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* iPhone 及以下 */ @media only screen and (max-width: 767px) {} /* 仅iPhone 横版，包括某些平板电脑的竖版 */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* 仅iphone4 竖版 */ @media only screen and (max-width: 479px) {}
- 25. 淘宝彩票头部的响应式的实现
- 26. Topic • 平台选择 • MediaQuery • 文字排版 • 布局 • 图片载入 • Slide组件
- 27. iphone android 文泉驿 微米黑 华文细黑 英文均默认为无衬线字体，因此cssreset.css中的默认字体设置同样适用
- 28. body { font-family: ”tahoma,arial,5b8b4f53,sans-serif”; } cssreset.css中的默认字体设置，“宋体”二字用unicode编码表示
- 29. “宋体”的unicode编码 body { font-family: ”tahoma,arial,5b8b4f53,sans-serif”; } cssreset.css中的默认字体设置，“宋体”二字用unicode编码表示
- 31. html { -webkit-text-size-adjust: 100%; } 在css中关掉字体缩放，需要这样配置
- 32. Topic • 平台选择 • MediaQuery • 文字排版 • 布局 • 图片载入 • Slide组件
- 33. Layout 传统栅格 动态栅格 (列宽槽距固定) (只固定列数,宽度不固定)
- 34. 让css变得“可编程”
- 36. <link rel="stylesheet" href="demo.less" type="text/less" media="screen" /> 在页面中引入你的less样式 @import ‘grid.less’ @columns:12; @columnwidth:60; @gutterwidth:20;
- 37. <link rel="stylesheet" href="demo.less" type="text/less" media="screen" /> @import ‘grid.less’ @columns:12; @columnwidth:60; @gutterwidth:20; 引入AnoleCSS
- 38. <link rel="stylesheet" href="demo.less" type="text/less" media="screen" /> @import ‘grid.less’ @columns:12; @columnwidth:60; @gutterwidth:20; 定义栅格
- 39. AnoleCSS API .column(@x,@columns:@columns) //定义所占栅格数 .row(@x:@columns,@columns:@columns) //独占一行的column .stretch //拉伸到父容器宽度 .offset(@offset:1) //相对自身宽度大小做位移 .push(@x:1) //相对栅格宽度大小做正位移 .pull(@x:1) //相对栅格宽度大小做负位移
- 40. An example // LESS @import 'grid.less'; @columns:12; @columnwidth:60; @gutterwidth:20; article { .column(9); } section { .column(3); }
- 41. An example // LESS @import 'grid.less'; @columns:12; @columnwidth:60; 加入响应 @gutterwidth:20; 式代码 article { .column(9); } section { .column(3); } @media screen and (max-width: 720px) { article { .column(12); } section { .column(12); } }
- 43. Topic • 平台选择 • MediaQuery • 文字排版 • 布局 • 图片载入 • Slide组件
- 46. <style> .selector-to-img { width:100px;height:100px; background:url('img-pc.png') no-repeat center; } @media only screen and /*tablet*/ { /*重设图片尺寸*/ background:url('img-tablet.png') no-repeat center; } @media only screen and /*mobile*/ { /*重设图片尺寸*/ background:url('img-mobile.png') no-repeat center; } </style> <img src="space.gif" class="selector-to- img" />
- 47. Topic • 平台选择 • MediaQuery • 文字排版 • 布局 • 图片载入 • Slide组件
- 48. Slide Widgets
- 49. CSS3 Animation? • CSS3transition • CSS32dtransform • CSS33dtransform • CSS3keyframe animation
- 50. CSS3 Animation? • CSS3transition 平滑的改变 • CSS32dtransform CSS属性 • CSS33dtransform • CSS3keyframe animation
- 51. CSS3 Animation? • CSS3transition CSS属性值 • CSS32dtransform 未改变 • CSS33dtransform • CSS3keyframe animation
- 52. CSS3 Animation? • CSS3transition 开启硬件 • CSS32dtransform 加速 • CSS33dtransform • CSS3keyframe animation
- 53. CSS3 Animation? • CSS3transition • CSS32dtransform • CSS33dtransform • CSS3keyframe animation 复杂动画 和性能无关
- 54. // true:支持，false:不支持 var nativeTransition = "webkitTransition" in document.body.style; JS判断是否 开启内置动画
- 55. animNode.setStyles({ '-webkit-transition-duration': speed + 's', '-webkit-transform':'translate3d('+dic+',0,0)' }); 设置动画相关的css属性来完成动画特效，在低版本ie中降级使用setInterval来实现动画
- 56. animNode.setStyles({ '-webkit-transition-duration': speed + 's', '-webkit-transform':'translate3d('+dic+',0,0)' }); 在开启内置动画基础上 使用transform代替transition
- 57. animNode.setStyles({ '-webkit-transition-duration': speed + 's', '-webkit-transform':'translate3d('+dic+',0,0)' }); 使用translate3d 代替translate2d
- 58. Make Widgets Touchable 在手持终端里 加入触屏事件 在移动终端中，幻灯切换组件的丰富交互应当能够响应触屏事件
- 59. YUI Slide http://jayli.github.com/gallery/yuislide/ 在各个平台里实现平滑的动画，并支持触屏事件
- 60. TODO List • 多尺寸图片载入方案优化 • 对PC事件的兼容 • 布局方案的bugfix和改进 • 更完整的MediaQuery • 移动终端页面体积优化 • 代码实现和内容可维护性之前的权衡 •…
- 62. Thanks WD：灵玉 流火 完真 虎牙 地极 栋寒 函谷 VD：人马 夏之
- 63. ref • http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:rd • http://jayli.github.com/gallery/yuislide/ • http://quirktools.com/screenfly/ • http://mediaqueri.es/ • http://www.slideshare.net/agencedagobert/le-responsive- design-par-dagobert • http://www.slideshare.net/yiibu/pragmatic-responsive-design
- 64. Q&A 响应式设计小组 淘宝北京研发中心UED 拔赤 – http://jayli.github.com