響應(yīng)式網(wǎng)頁設(shè)計(jì)
- “響應(yīng)式網(wǎng)頁設(shè)計(jì)”這個(gè)名字是Ethan Marcotte在2010發(fā)明的，即Responsive Web Design（RWD）。當(dāng)時(shí)，他在A List Apart上寫了一篇文章，這篇文章綜合運(yùn)用了三種已有技術(shù)（彈性網(wǎng)格布局、彈性圖片/媒體、媒體查詢）實(shí)現(xiàn)了一個(gè)解決方案，就叫“響應(yīng)式Web設(shè)計(jì)”。
- 響應(yīng)式Web設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備的多個(gè)屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。就是網(wǎng)頁內(nèi)容會(huì)隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不一樣的樣式。
超文本標(biāo)記語言
- 標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，超文本就是指網(wǎng)頁內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
層疊樣式表
- 一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。
為什么需要響應(yīng)式網(wǎng)頁設(shè)計(jì)
image.png
- 首先看占比最多的為“其他”分辨率，因?yàn)槿缃耠S著科技的迅速發(fā)展，不同的設(shè)備的分辨率不同，造成分辨率的數(shù)值無法統(tǒng)一，因此說，只有通過響應(yīng)式Web設(shè)計(jì)才會(huì)針對(duì)任意設(shè)備的網(wǎng)頁內(nèi)容進(jìn)行相對(duì)應(yīng)的布局，才能真正脫離先前的傳統(tǒng)布局方式。
- 再看人們用1366x768的屏幕分辨率的設(shè)備（即電腦）的趨勢(shì)在不斷下降，而用360x640的屏幕分辨率的設(shè)備（即手機(jī)）的趨勢(shì)在不斷上升，通過這個(gè)的比較，也能看出如今人們利用手機(jī)來上網(wǎng)的趨勢(shì)在不斷攀升，但同時(shí)利用電腦的人數(shù)也不能被忽視，因此，如果想要通過寫一些較輕量的代碼就能在不同設(shè)備中進(jìn)行應(yīng)用的話，響應(yīng)式Web設(shè)計(jì)則是最佳選擇。
image.png
- 從世界屏幕分辨率趨勢(shì)圖也不難看出人們使用手機(jī)上網(wǎng)的趨勢(shì)不斷攀升，因此不管是中國還是世界各個(gè)地區(qū)，為了滿足各種用戶的體驗(yàn)效果，使用響應(yīng)式網(wǎng)頁設(shè)計(jì)是一大趨勢(shì)。
采用RWD設(shè)計(jì)與未采用該設(shè)計(jì)的例子進(jìn)行對(duì)比
- 未采用響應(yīng)式網(wǎng)頁設(shè)計(jì)：正方教務(wù)系統(tǒng)網(wǎng)頁（http://jwxt.nfsysu.cn/）
image.png
- 采用響應(yīng)式網(wǎng)頁設(shè)計(jì)：天貓網(wǎng)頁（https://www.tmall.com/?pid=mm_26632368_9250376_53442874&b=2siXCFbyAxv41h4m93l&disablePopup=true&disableSJ=1&spm=a2e15.8772214.0.0#/main）
image.png
- 從這兩個(gè)例子比較進(jìn)行分析，則能看出運(yùn)用了響應(yīng)式網(wǎng)頁設(shè)計(jì)與沒有用響應(yīng)式網(wǎng)頁設(shè)計(jì)的區(qū)別所在，運(yùn)用了RWD設(shè)計(jì)的則在不同分辨率中進(jìn)行任意變化，有利于滿足電腦與手機(jī)等用戶對(duì)該軟件的滿意程度，而沒有運(yùn)用RWD設(shè)計(jì)的則會(huì)對(duì)用戶的瀏覽進(jìn)行一定的影響。
RWD的三項(xiàng)組成科技
- 彈性網(wǎng)格布局（fluid grid）：圖片的尺寸可以被自動(dòng)調(diào)整，頁面布局再不會(huì)被破壞。無論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)屏幕轉(zhuǎn)到iPad上瀏覽，頁面都會(huì)真正的富有彈性。
- 彈性圖片（flexible image）： 不僅能同比的縮放圖片，還要在小設(shè)備上降低圖片自身的分辨率。其原理為rwd-images.js會(huì)檢測當(dāng)前設(shè)備的屏幕分辨率，如果是大屏幕設(shè)備，則向頁面head部分中添加BASE標(biāo)記，并將后續(xù)的圖片、腳本和樣式表加載請(qǐng)求定向到一個(gè)虛擬路徑"/rwd-router"。當(dāng)這些請(qǐng)求到達(dá)服務(wù)器端，.htacces文件會(huì)決定這些請(qǐng)求所需要的是原始圖片還是小尺寸的"響應(yīng)式圖片"，并進(jìn)行相應(yīng)的反饋輸出。對(duì)于小屏幕的移動(dòng)設(shè)備，原始尺寸的大圖片永遠(yuǎn)不會(huì)被用到。
- 媒體查詢（media queries）：媒體查詢是界面為了適應(yīng)不同屏幕大小而存在的。媒體查詢 是評(píng)估 True 或 False 的一種表達(dá)。如果為 True，則繼續(xù)使用樣式表。如果為 False，則不能使用樣式表。這種簡單邏輯能夠更靈活地對(duì)特定的設(shè)計(jì)場景使用自定義的顯示規(guī)則。媒體查詢包含一個(gè)媒體類型，后跟一個(gè)或多個(gè)檢查特定條件（如最小的屏幕寬度）的表達(dá)式。
RWD和前后端的關(guān)系
與前端的關(guān)系
- 前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)。
前端開發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級(jí)版本HTML5、CSS3，以及SVG等。
與后端的關(guān)系
- 通過編寫后端的資料庫來改變前端的呈現(xiàn)效果，也意味說后端是與數(shù)據(jù)庫進(jìn)行交互以處理相應(yīng)的事務(wù)，后端需要考慮的是如何實(shí)現(xiàn)功能、數(shù)據(jù)的存取、平臺(tái)的穩(wěn)定性與性能等。
