响应式设计

响应式设计 2013/1/8 1 Email:[email protected]

响应式设计  可以使网站页面随浏览设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户 2013/1/8 2

 响应式Web设计是一种技术，可以使网站适应于任何设备 2013/1/8 3

实现方式 • 流动布局用百分比来控制页面每列的宽度，从而实现宽度的自适应 • 弹性布局是css3中的新技术，可以实现自适应布局 • CSS3 Media
Queries(媒介查询)实现跨设备跨浏览器的响应式Web设计 2013/1/8 4

流动布局 • 自适应浏览器分辨率，在不同浏览器下都是相同 2013/1/8 5

弹性布局 • 创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局 2013/1/8 6

• 创建多个样式表，以适应不同设备 • 多个样式文件整合在一个样式文件中 *依靠屏幕宽度来进行适配是最简单的方法 Media Queries 2013/1/8 7

设备尺寸 • @media screen and (min-width: ?) 2013/1/8 8

宽度临界点 2013/1/8 9

适配尺寸 2013/1/8 10

图片自适应 • 弹性图片通过max-width: 100%和height: auto实现图片同比缩放,不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放缺点：如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗
• 响应式图片响应式图片方式根据屏幕尺寸使用不同大小图片，对页面下载速度和存储空间影响较小缺点：需要准备多张不同尺寸图片，维护成本高 2013/1/8 11

• 当某些旧设备无法完美支持CSS3的media query时，它可以作为后备支援 • media queries是以纯CSS方式实现响应式 Web设计思路的手段。 JavaScript 2013/1/8 12

参考 • 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

谢谢 2013/1/8 14

响应式设计

响应式设计

Thinking80s

More Decks by Thinking80s

Other Decks in Programming

Featured

Transcript