响应式设计

Transcript

1. 响应式设计 2013/1/8 1 Email:7405321@gmail.com
2. 响应式设计  可以使网站页面随浏览设备的不同而自行响应，动态的调整布局结构、 元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户 2013/1/8 2
3.  响应式Web设计是一种技术，可以使网站适应于任何设备 2013/1/8 3
4. 实现方式 • 流动布局用百分比来控制页面每列的宽度， 从而实现宽度的自适应 • 弹性布局是css3中的新技术，可以实现自适 应布局 • CSS3 Media Queries(媒介查询)实现跨设备跨 浏览器的响应式Web设计 2013/1/8 4
5. 流动布局 • 自适应浏览器分辨率，在不同浏览器下都 是相同 2013/1/8 5
6. 弹性布局 • 创建自适应浏览器窗口的流动布局或自适 应字体大小的弹性布局 2013/1/8 6
7. • 创建多个样式表，以适应不同设备 • 多个样式文件整合在一个样式文件中 *依靠屏幕宽度来进行适配是最简单的方法 Media Queries 2013/1/8 7
8. 设备尺寸 • @media screen and (min-width: ?) 2013/1/8 8
9. 宽度临界点 2013/1/8 9
10. 适配尺寸 2013/1/8 10
11. 图片自适应 • 弹性图片 通过max-width: 100%和height: auto实现图片同比缩放,不必在样式表中为图片设 置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩 放 缺点：如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间 也会造成没有必要的消耗 • 响应式图片 响应式图片方式根据屏幕尺寸使用不同大小图片，对页面下载速度和存储空间影 响较小 缺点：需要准备多张不同尺寸图片，维护成本高 2013/1/8 11
12. • 当某些旧设备无法完美支持CSS3的media query时，它可以作为后备支援 • media queries是以纯CSS方式实现响应式 Web设计思路的手段。 JavaScript 2013/1/8 12
13. 参考 • http://www.aliued.cn/2012/09/28/%E5%93% 8D%E5%BA%94%E5%BC%8Fweb%E8%AE%BE %E8%AE%A1.html • http://wenku.baidu.com/view/2dcceddea58d a0116c1749e2 • http://beforweb.com/node/6 • http://www.qianduan.net/responsive-web- design.html • http://ucdchina.com/snap/12450 • http://blog.jobbole.com/30648/ 2013/1/8 13
14. 谢谢 2013/1/8 14