名詞解釋
- RWD：即Responsive Web Design，譯為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，一個(gè)網(wǎng)站可以同時(shí)適配多個(gè)設(shè)備和各種屏幕，網(wǎng)絡(luò)布局和功能隨之變化。
設(shè)計(jì)師在印刷介質(zhì)中知道的并且通常在網(wǎng)絡(luò)介質(zhì)中需要的控制僅僅是印刷頁(yè)面限制的功能。我們應(yīng)該接受這樣的事實(shí)，即網(wǎng)絡(luò)沒(méi)有相同的約束條件，并為此設(shè)計(jì)靈活性。但首先，我們必須“接受事物的潮起潮落”。
—— John Allsopp
前端：即front-end，為網(wǎng)站的前臺(tái)部分，包括基本的HTML，CSS，Javascript，SVG等。
彈性網(wǎng)絡(luò)布局：即fluid grip，為網(wǎng)絡(luò)布局提供最大的靈活性。
彈性圖片/媒體：即flexible images，圖片在根據(jù)屏幕大小伸縮的時(shí)候，圖片的比例保持不變。使用CSS的max-width屬性，一行簡(jiǎn)單的代碼就可實(shí)現(xiàn)。
img { max-width: 100%;}媒體查詢(xún)：即media queries，在不同的條件下使用不同的樣式，使頁(yè)面在不同在終端設(shè)備下達(dá)到不同的渲染效果。
媒體查詢(xún)使我們可以在頁(yè)面重新塑造時(shí)進(jìn)行一些令人難以置信的精確微調(diào)：
—— Ethan Marcotte
- 斷點(diǎn)：即breakpoint，某個(gè)寬度臨界點(diǎn)，跨過(guò)這個(gè)點(diǎn)，布局就會(huì)發(fā)生顯著變化。
- 視口：即viewport，瀏覽器中用于呈現(xiàn)網(wǎng)頁(yè)的區(qū)域，并非所顯示的屏幕大小。
為什么要使用RWD
1. 移動(dòng)端的出現(xiàn)
眾所周知，2007年Apple開(kāi)啟了手機(jī)上網(wǎng)的先河，移動(dòng)端的使用和研發(fā)成為了一股浪潮，隨著時(shí)間的推移，移動(dòng)端以更容易接受、更方便快捷的方式廣受青睞。而這，不斷上升的數(shù)據(jù)，不斷變化著的占比，標(biāo)志著一個(gè)移動(dòng)時(shí)代的到來(lái)。
2. 超越性的交叉點(diǎn)
2016年10月份中旬，從“ 每個(gè)家庭都有一部電腦 ” 延津到了 “ 人手一臺(tái)手機(jī) ” ，得益于技術(shù)的革新，市面上各類(lèi)型的手機(jī)多得令人眼花繚亂。而設(shè)備的屏幕大小類(lèi)型、設(shè)備布局能力也復(fù)雜了起來(lái)。
3. 拋棄傳統(tǒng)的頁(yè)面模式
21世紀(jì)是一個(gè)信息時(shí)代，更是一個(gè)智能化、人性化的時(shí)代。當(dāng)用戶(hù)在手機(jī)上瀏覽電腦端上的網(wǎng)頁(yè)時(shí)，而頁(yè)面完封不動(dòng)照搬在的移動(dòng)端上，靠縮放和放大兩指去進(jìn)行瀏覽操作，閱讀文體時(shí)，盡管是年輕人也頗感吃力。響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)便越發(fā)覺(jué)得更為貼心，也更契合現(xiàn)代的科技水平，標(biāo)示著現(xiàn)代人更人性化的追求。
響應(yīng)式網(wǎng)頁(yè)成標(biāo)桿
- 作為電商行業(yè)巨頭的淘寶，用戶(hù)永遠(yuǎn)是最重要的，而用戶(hù)體驗(yàn)很大幾率上決定了用戶(hù)的第一印象，出于更為貼心的人性化設(shè)計(jì)和更舒暢的用戶(hù)體驗(yàn)，我想，淘寶網(wǎng)應(yīng)該會(huì)毫不猶豫地選擇響應(yīng)式了吧？
https://www.taobao.com/
網(wǎng)頁(yè)版淘寶
手機(jī)版淘寶網(wǎng) - 全國(guó)高校的教務(wù)系統(tǒng)可能只是改了學(xué)校名稱(chēng)，連主色調(diào)都是一樣的。
而簡(jiǎn)潔的頁(yè)面，看上去就沒(méi)有過(guò)雜亂的目錄或者是廣告，所以干脆地就統(tǒng)一沒(méi)有把網(wǎng)頁(yè)做成響應(yīng)式了吧。
http://jwxt.nfsysu.cn/
教務(wù)系統(tǒng)電腦版
教務(wù)系統(tǒng)手機(jī)版
RWD和前后端的關(guān)系
前端，顧名思義就是用戶(hù)在網(wǎng)頁(yè)上看到的所有布局設(shè)計(jì)，HTML是由文字圖片所組合成的元素，而CSS的工作就是決定字體大小、顏色效果、背景選擇等等，JavaScript則表現(xiàn)出生動(dòng)的動(dòng)態(tài)效果。
后端，這就是用戶(hù)看不見(jiàn)的，程序開(kāi)發(fā)人員才能看到的“暗面”，就好比一盤(pán)美味的披薩，該怎么去制作餅底、披薩醬，食材準(zhǔn)備和烤箱溫度就是后端工程師的事情了，而前端則是擺盤(pán)的工作咯~
RWD基于HTML、CSS、JavaScript，對(duì)代碼進(jìn)行簡(jiǎn)單的修飾就可實(shí)現(xiàn)響應(yīng)性服務(wù)了，從而擺脫復(fù)雜的后端方案了。
現(xiàn)在比以往任何時(shí)候，我們都在設(shè)計(jì)意在通過(guò)不同體驗(yàn)梯度來(lái)觀看的作品。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)為我們提供了一條前進(jìn)的道路，最終讓我們能夠“為潮起潮落而設(shè)計(jì)”。
——Ethan Marcotte
