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 : 河南省高等學校信息網絡重點學科開放實驗室河南省高等學校信息網絡重點學科開放