响应式网站设计PPT

1、河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networking徐延辉徐延辉20132013年年1 1月月3030日日河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Net

2、working 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingResponsive Web Design这个词有多个翻译：反馈式设计？交互式设计？自适应网页设计？自适应网页设计？响应式网页设计？哪个翻译最接近？河南省高等学校信息网络重点

3、学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networking“响应式网站设计”的概念？他给的定义是指可以自动识别屏幕宽度、并做出相应调整的网页设计。2010年，Ethan Marcotte提出了“Responsive Web Design”这个名词，河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Informatio

4、n NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一个范例他制作了一个范例，里面是福尔摩斯历险记六个主人公的头像。u如果屏幕宽度大于1300像素，则6张图片并排在一行。河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一个范例u

5、则6张图片分成两行u如果屏幕宽度在600像素到1300像素之间河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一个范例u则导航栏移到网页头部u如果屏幕宽度在400像素到600像素之间河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Informat

6、ion NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一个范例u则6张图片分成三行u如果屏幕宽度在400像素以下河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一个范例河南省高等学校信息网络重点学科开放实验室河南省高等学校信息

7、网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networkingmediaqueri.es上面有更多这样的例子河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingRESPONSIVE DESIGN BOOKMARK

8、LETRESPONSIVE DESIGN BOOKMARKLET网页审阅工具可以在一张网页上，同时显示不同分辨率屏幕的测试效果240X320320X480480X640768X10241024X7681200X800河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networking网页审阅工具“Adobe Edge Inspect”Edge Inspect 是一款对移动开发者非常有用

9、的工具 可以帮助设计师和开发者同时在多个移动设备上预览应用设计河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放实验室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networking自适应网页设计到底是怎么做到的？u允许网页宽度自动调整u不使用绝对宽度u相对大小的字体u流动布局（fluid grid）u选择加载CSSuCSS的media规则u图片的自适应（fluid image）THANK THANK YOUYOUn 微博微博:n Email : 河南省高等学校信息网络重点学科开放实验室河南省高等学校信息网络重点学科开放