響應(yīng)式網(wǎng)站設(shè)計PPT

1、河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networking徐延輝徐延輝20132013年年1 1月月3030日日河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Net

2、working 移動設(shè)備正超過桌面設(shè)備，成為訪問互聯(lián)網(wǎng)的最常見終端。于是，網(wǎng)頁設(shè)計師不得不面對一個難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁？河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingResponsive Web Design這個詞有多個翻譯：反饋式設(shè)計？交互式設(shè)計？自適應(yīng)網(wǎng)頁設(shè)計？自適應(yīng)網(wǎng)頁設(shè)計？響應(yīng)式網(wǎng)頁設(shè)計？哪個翻譯最接近？河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)

3、學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networking“響應(yīng)式網(wǎng)站設(shè)計”的概念？他給的定義是指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。2010年，Ethan Marcotte提出了“Responsive Web Design”這個名詞，河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Informatio

4、n NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一個范例他制作了一個范例，里面是福爾摩斯歷險記六個主人公的頭像。u如果屏幕寬度大于1300像素，則6張圖片并排在一行。河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一個范例u

5、則6張圖片分成兩行u如果屏幕寬度在600像素到1300像素之間河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一個范例u則導(dǎo)航欄移到網(wǎng)頁頭部u如果屏幕寬度在400像素到600像素之間河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Informat

6、ion NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一個范例u則6張圖片分成三行u如果屏幕寬度在400像素以下河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingEthan Marcotte制作的一個范例河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息

7、網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networkingmediaqueri.es上面有更多這樣的例子河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information NetworkingRESPONSIVE DESIGN BOOKMARK

8、LETRESPONSIVE DESIGN BOOKMARKLET網(wǎng)頁審閱工具可以在一張網(wǎng)頁上，同時顯示不同分辨率屏幕的測試效果240X320320X480480X640768X10241024X7681200X800河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networking網(wǎng)頁審閱工具“Adobe Edge Inspect”Edge Inspect 是一款對移動開發(fā)者非常有用

9、的工具 可以幫助設(shè)計師和開發(fā)者同時在多個移動設(shè)備上預(yù)覽應(yīng)用設(shè)計河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室Henan Provincial Key Lab on Information NetworkingHenan Provincial Key Lab on Information Networking自適應(yīng)網(wǎng)頁設(shè)計到底是怎么做到的？u允許網(wǎng)頁寬度自動調(diào)整u不使用絕對寬度u相對大小的字體u流動布局（fluid grid）u選擇加載CSSuCSS的media規(guī)則u圖片的自適應(yīng)（fluid image）THANK THANK YOUYOUn 微博微博:n Email : 河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放實(shí)驗(yàn)室河南省高等學(xué)校信息網(wǎng)絡(luò)重點(diǎn)學(xué)科開放