一淘新首页总结
- 5. 协同合作 – 分工
• 6 人合作开发
• 约定 css/js/html 规范
• 各个模块分开开发,分工明确、
互不影响
• 后续版本更新开发,学习成本低
- 8. 响应式
响应式布局
多平台多分辨率适配
Media query 的兼容性
响应式图片处理
KISSY slide 的支持响应式
- 9. 响应式 - 布局
栅格
flex box
绝对定位, js 计算
fluid grid( 流体网格 )
Media query
- 10. 响应式 - 布局 - 栅格
栅格定宽不适用响应式
* 栅格实现扩展:
三栏左右定宽
中间内容自适应
- 11. 响应式 - 布局
栅格
flex box
绝对定位, js 计算
fluid grid( 流体网格 )
Media query
- 13. 响应式 - 布局
栅格
flex box
绝对定位, js 计算
fluid grid( 流体网格 )
Media query
- 14. 响应式 - 布局
栅格
flex box
绝对定位, js 计算
fluid grid( 流体网格 )
Media query
- 15. 响应式 - 布局 -fluid grid
原理:
把栅格宽度变百分比 自适应
类库:
Bootstrap
Anolecss
foundation
+less 可编程
- 16. 响应式 - 布局
栅格
flex box
绝对定位, js 计算
fluid grid( 流体网格 )
Media query
- 17. 响应式 - 布局 -mediaquery
引入方式 :
<link rel="stylesheet" media=“screen and
(min-width:500px)" href="example.css" />
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
http://www.w3.org/TR/css3-mediaqueries/
- 19. 响应式
响应式布局
多平台多分辨率适配
Media query 的兼容性
响应式图片处理
KISSY slide 的支持响应式
- 21. 响应式 - 多平台多分辨率适配 - 一淘首页平
台分辨率分析
操作系统 : winxp 68.22% win7 19.71%
平台:手机占 0.16% ,电脑 99.84%
iphone 占 0.04% , ipad 竖版占 0.58%
分辨率:
1024x768 最高,占 21.5%
大于 1024 约占 75% ,可再细分
- 23. 响应式 - 多平台多分辨率适配 - 一淘首
页适配选择
原因:
兼容线上 990 和 1200
时间、维护成本、设计难度、产品定位
分辨率大于 1024 约占 75%
结果:
990 窄版
1200 宽版
- 26. 响应式 - 多平台多分辨率适配 -
一淘首页适配选择
选择:
栅格扩展 +media query 结合使用
缺点:
窄版部分内容缺失(需改进设计)
浪费带宽,下载额外的内容
优点:
无需做图片自适应,省运营成本
部分内容自然延展
- 28. 响应式 - 多平台多分辨率适配 -
通用
淘宝机票( 960 、 768 、 480 、 320 )
Bootstrap demo(768 、 980 、 1200)
主搜索响应式适配
- 29. 响应式
响应式布局
多平台多分辨率适配
Media query 的兼容性实现
响应式图片处理
KISSY slide 的响应式实现
- 37. 响应式 -mediaquery 兼容性实现 -
respond.js
Respond.js 的使用:
1.Css 中直接写 media query
2.Css 后面 Head 中引入 respond.js ( 1k 左右
)
3. 跨域额外配置( CDN )
a.cross-domain/respond-html 放到另外一个域下
b.cross-domain/respond.proxy.gif 放到本域下
https://github.com/scottjehl/Respond
- 38. 响应式 -mediaquery 兼容性实现 -
respond.js
Respond.js 的原理:
1. 在 body 内容输出之前切换 css
2. 解析所有 css, 正则分析出 media
quer y css 块
3. 页面 load 和 window.resize 时根据
viewpor tWidth 加入相应的 css 块
http://scottjehl.github.com/Respond/test/test.html demo
- 39. 响应式 -mediaquery 兼容性实现
Respond.js ( 326 line )
css3-mediaqueries.js(1033line)
一淘首页实现方法
https://github.com/livingston/css3-mediaqueries-js
- 40. 响应式 -mediaquery 兼容性实现 -
一淘实现方法
Ie8- 完全模拟 mediaquery 效果
关键阶段:页面 load+ 窗口 resize
实现:
1. 类 respond.js 切换内联 css
2. 切换 css 文件 <link rel="stylesheet" media=“screen and (min-
width:500px)" href="example.css" />
3. 切换全局 class
- 41. 响应式 -mediaquery 兼容性实现 -
一淘实现方法
1. 类 respond.js 切换内联 css
优点:自动化、使用方便
缺点:跨域配置麻烦、性能 ( 请求 css 文件,解析 mediaquery 慢、 js 偏
大)
2. 切换 css 文件 <link rel=“stylesheet” media=“screen and (min-
width:500px)” href=“example.css” />
优点:文件分离, load 时按需加载, js 小
缺点:多文件管理麻烦
3. 切换全局 class
优点:方便管理 js 小
缺点: load 时所有 css 加载,但其实不多
- 43. 响应式
响应式布局
多平台多分辨率适配
Media query 的兼容性
响应式图片处理( by 雨异)
KISSY slide 的支持响应式( by 雨异)
- 44. 响应式图片处理
1. 响应式图片
2. 图片缩放
http://10.13.124.71/tsrp/?q&loc=%BA%BC%D6%DD&app=idea&test=1
- 45. 响应式图片处理
1. 响应式图片
响应式设计首先要解决的问题就是 响应图片的问题。
在高的分辨率下现在高分辨率的图片,在低分辨率下则显示低分辨率的图片。
在拉伸浏览器窗口时缩放图片的同时也要考虑更换不同分辨率的图片。
- 46. 响应式图片处理
1. 响应式图片
cdn 的图片常用的有 5 个规格:
60×60 , 80×80 , 120×120 , 160×160 , 210×210
有服务器输出不带规格图片的地址,然后通过 js 来获取地址,并且根据当
前分辨率的大小来选择合适规格的图片。最后生成图片放在 dom 文档里。
拉伸浏览器时会实时改写网格的高度,由此来实现图片缩放,结束时则判
断页面大小来选择对应规格的图片,替换掉原来的图片。
- 48. 响应式图片处理
2. 图片等比缩放
保证图片所在的区块占百分之几, 图片要垂直居中对齐,图片缩放。
高度很高的图片如何实现自动缩放。
table-cell 方式和 inline-block 的方式
相对 - 绝对定位的方式太麻烦
- 49. table-cell 方式
通过设置 display: table-cell ,并且设置宽高,就可以实现里面元素
的垂直居中对齐。
table-cell 不能继承父级的宽高,除非父级是 table 。因为要自适应,所
以宽度不能定死,于是父级定义我为 display: table 。
图片要能等比缩放, max-width: 100%, height: auto; 这是按宽来
缩放,
max-width 会导致 IE8 下图片消失,所以加上 width: auto9 。
IE6/7 不支持 table-cell ,可以使用 inline-block 来触发 hasLayout ,这
样也能实现垂直居中对齐。
- 50. table-cell 方式
.parent{ display: table; width: 100%}
.parent .child{ display: table-cell; text-align: center; vertical-align: middle}
.parent .child img{ max-width: 100%; height: auto; width: auto9}
这是按宽等比缩放图片并且垂直居中对齐。 Parent 的高度通过 js 实时更新
如果出现图片 http://img.f2e.taobao.net/img.png?x=100x390,高很高的情况
下,图片将按原来尺寸撑开 table-cell 。除非给 table-cell 定死高,否则需要
加入一个样式在打破 table 的盒模式。
.parent.vertical{ display: block; text-align: center;}
.parent.vertical .child{ display: inline-block; *display: block; *zoom: 1}
.parent.vertical .child img{
max-width: none;
max-height: 100%;
width: auto;
}
- 51. Inline-block 方式
通过设置 display: inline-block ,不设置宽高,而是在在父节点下在
添加一个 b 标签来定义高度,就可以实现垂直居中。
图片要能等比缩放, max-width: 100%, height: auto; 这是按宽来
缩放,
max-width 会导致 IE8 下图片消失,所以加上 width: auto9 。
对于高度太高的图片则需要设置父节点的高度,否则就只需要定
义 b 标签的高度。
- 52. Inline-block 方式
<div class=“parent”><b></b><div class=“child”><img src=“”/></div></
div>
.parent{ display: block; width: 100%;}
.parent .child{ display: inline-block; *display: inline; *zoom: 1; text-
align: center; vertical-align: middle}
.parent .child img{ max-width: 100%; height: auto; vertical-align:
middle;}
.parent b{width: 1px;overflow: hidden; margin-left: -1px;
vertical-align: middle; display: inline-block; *display: inline; *zoom: 1}
如果是按宽等比缩放 则设置 b 的高度。
如果是按高等比缩放 则设置 parent 的高度。这 2 个高度是一致的。
- 53. 响应式
响应式布局
多平台多分辨率适配
Media query 的兼容性
响应式图片处理
KISSY slide 的响应式实现
- 55. KISSY slide 的响应式实现
1. 实现 2 页之间的滚动效果
设置每页为浮动的 float: left; 通过定义 margin-left 来实现 2 页
在同一水平上。然后通过 js 来让 2 页的 margin-left 递增和递减来,这
样来实现动画的效果。
2. 实现 2 页之间的渐显效果
设置每页为浮动的 float: left; 通过定义 margin-right : -100%
来实现每页在同一位置上。然后通过 js 来让 2 页的 opacity 来实现渐显
的效果。
- 58. 响应式UI设计与实现
响应式设计wiki
其他相关:
http://www.webapptrend.com
https://github.com/scottjehl/Responsive-Images
https://github.com/scottjehl/Respond
http://adactio.com/journal/4497/
https://github.com/livingston/css3-mediaqueries-js/download
- 61. 性能优化
影
响
当
前
页
面
得
分
的 要为页面加上过期标志可以利用 a che 模块 pa
主 mod_ expires和 mod_ headers。
要 通过配置 .hta 文件, 可以轻易地按文件
ccess
因 类别设置缓存时间。
素
对页面内容进行 Gzip 压缩
……
此两项需要服务端完成
- 63. 性能优化
一、尽量减少 D OM 节点
textarea中的内容不会被立即渲染
总结:不需要初始加载就渲染的内容,尽量先不将其添加到结构中。
优点:减少页面初次渲染的节点,降低渲染负荷。
- 64. 性能优化
二、尽量减少内嵌样式和脚本
内嵌式脚本,阻塞页面加载,提高维护成本
内嵌式样式,降低维护性
总结:除必须情况外,在页面头部引入 CSS 文件,在页面底部引入 J 文件;
S
尽可能的将所有样式合并成一个文件,将所有脚本合并成一个文件。
优点:减少页面阻塞,方便代码维护,提升页面性能。
- 66. 性能优化
四、首屏外全局懒加载
首屏以外内容做全局懒加载
总结:首屏以外做全局懒加载,减少首次加载资源。
优点:减少首次加载速度,减少首次渲染节点数,提升页面评分。
- 67. 性能优化
五、异步延时数据处理
1. TMS 默认填入数据,防止异步数据未加载时显示空白
。
2. 与开发约定好接口及数据格式,进行异步延时请求及
数据处理。
- 69. 性能优化 ( 脚本样式合并 )
六、 异步脚本样式再合并
• kissy 组件合并为一个 js 文件 合并后
• 一淘组件合并为一个 js 文件
• 一淘组件样式合并为一个 css 文件
- 71. 可用性 – 图片 ( 特殊字体文字使用图片 )
显示图片 隐藏文字 图片未加载
- 72. 可用性 – 图片 ( 特殊字体文字使用图片 )
HTML 结构 :
<h2 class="hd ">
<a href="#" class="we-talk-tit left" data-stat="" title=" 优惠大家谈 "> 优惠大家谈 </a>
</div>
CSS: .we-talk .hd {
background: url("http://XXXX") no-repeat 0 -40px;
height: 20px;
line-height: 20px;
}
.we-talk-tit {
font-size: 16px;
position: relative;
z-index: -1;
}
优点: 无空标签 , 语义化更好
不使用绝对定位 , 减少渲染消耗
- 73. 可用性 – 图片 ( 读屏软件 )
带有链接的图片读屏软件可能会重复读取文字