《响应式网站设计》PPT课件.ppt

Responsive Web Design响应式网站设计,徐延辉,2013年1月30日,移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？,Responsive Web Design,这个词有多个翻译：,反馈式设计？,交互式设计？,自适应网页设计？,响应式网页设计？,哪个翻译最接近？,“响应式网站设计”的概念？,他给的定义是指可以自动识别屏幕宽度、并做出相应调整的网页设计。,2010年，Ethan Marcotte提出了“Responsive Web Design”这个名词，,Ethan Marcotte制作的一个范例,他制作了一个范例，里面是福尔摩斯历险记六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。,Ethan Marcotte制作的一个范例,则6张图片分成两行,如果屏幕宽度在600像素到1300像素之间,Ethan Marcotte制作的一个范例,则导航栏移到网页头部,如果屏幕宽度在400像素到600像素之间,Ethan Marcotte制作的一个范例,则6张图片分成三行,如果屏幕宽度在400像素以下,Ethan Marcotte制作的一个范例,mediaqueri.es上面有更多这样的例子,RESPONSIVE DESIGN BOOKMARKLET,网页审阅工具,可以在一张网页上，同时显示不同分辨率屏幕的测试效果,作用,240X320,320X480,480X640,768X1024,1024X768,1200X800,网页审阅工具“Adobe Edge Inspect”,Edge Inspect是一款对移动开发者非常有用的工具 可以帮助设计师和开发者同时在多个移动设备上预览应用设计,自适应网页设计到底是怎么做到的？,允许网页宽度自动调整不使用绝对宽度相对大小的字体流动布局（fluid grid）选择加载CSSCSS的media规则图片的自适应（fluid image）,景千,