1. 中英文術(shù)語解釋
| 中文 | 英文 |
|---|---|
| 響應(yīng)式網(wǎng)頁設(shè)計(jì) | responsive web design (rwd) |
| 視口 | viewport |
| 超文本標(biāo)記語言 | Hyper Text Markup Language （html） |
| 層疊樣式表 | Cascading Style Sheets （css） |
| 彈性/流體網(wǎng)格布局 | fluid grid |
| 彈性圖片／媒體 | flexible images |
| 媒體查詢 | media queries |
| 前端 | frontend |
| 后端 | backend |
| 全球廣域網(wǎng)、萬維網(wǎng)、互聯(lián)網(wǎng)總稱 | World Wide Web (web) |
2. 術(shù)語解說
| 術(shù)語 | 解釋 |
|---|---|
| 視口 | 瀏覽器窗口內(nèi)的內(nèi)容，不包括工具欄和標(biāo)簽欄等即網(wǎng)頁實(shí)際顯示區(qū)域。 |
| 響應(yīng)式網(wǎng)頁設(shè)計(jì) | 不僅僅是根據(jù)視口大小改變網(wǎng)頁布局，更是針對(duì)任意設(shè)備對(duì)網(wǎng)頁內(nèi)容進(jìn)行完美布局的一種顯示機(jī)制。 |
| html | 通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。它是web標(biāo)準(zhǔn)的主要結(jié)構(gòu)標(biāo)準(zhǔn) |
| css | 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。它是web標(biāo)準(zhǔn)的主要表現(xiàn)標(biāo)準(zhǔn) |
| 彈性/流體網(wǎng)格布局 | 頁面布局結(jié)構(gòu)基于表格，以往的網(wǎng)頁布局是以像素（px）為單位，來固定網(wǎng)頁各元素的尺寸（導(dǎo)致某些網(wǎng)頁需要拖拉滾動(dòng)才能完整瀏覽）。在響應(yīng)式網(wǎng)頁設(shè)計(jì)中，則以百分比為單位，可以讓網(wǎng)頁根據(jù)視口大小在任何媒體查詢之間靈活伸縮修正樣式（也可以說是使用媒體查詢來限制元素變動(dòng)范圍）。以此實(shí)現(xiàn)固定尺度轉(zhuǎn)換為相對(duì)尺度。 |
| 媒體查詢 | 由媒體類型和一個(gè)或多個(gè)檢測(cè)媒體特性的條件表達(dá)式組成。用于檢測(cè)例如width、height、color等媒體特性在不同視口的變化。在不改變網(wǎng)頁內(nèi)容前提下，為特定的一些輸出設(shè)備定制顯示效果。 |
| 彈性圖片 | 和彈性/流體網(wǎng)格布局一樣，實(shí)現(xiàn)圖片隨著流動(dòng)布局產(chǎn)生相應(yīng)縮放。通過max-width的屬性實(shí)現(xiàn)。 |
| 前端 | 直接與用戶交互部分，包括對(duì)Web頁面的結(jié)構(gòu)、Web的外觀視覺表現(xiàn)以及Web層面交互設(shè)計(jì)與實(shí)現(xiàn)。不涉及數(shù)據(jù)邏輯（就好比飯店服務(wù)員，只為客戶提供服務(wù)，不做飯！） |
| 后端 | 與數(shù)據(jù)庫進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯。如輸入用戶名、密碼 后登錄系統(tǒng)。就要連接數(shù)據(jù)庫來核實(shí)。（在后臺(tái)做菜的廚師） |
響應(yīng)式網(wǎng)頁設(shè)計(jì)的意義何在？
根據(jù)statCounter GlobalStats全球數(shù)據(jù)統(tǒng)計(jì)網(wǎng)站（專注于互聯(lián)網(wǎng)數(shù)據(jù)統(tǒng)計(jì)）統(tǒng)計(jì)的中國的屏幕分辨率和設(shè)備使用情況為例子
由圖可以看出，不僅設(shè)備分辨率種類豐富，更重要的是其它或未知再加上各種小眾的分辨率的使用，仍然占有較大的比例。
手機(jī)屏幕使用已經(jīng)比電腦更加普及了。
沒有對(duì)比就沒有傷害
以下是兩種不同網(wǎng)頁的截圖，對(duì)比一下響應(yīng)式與非響應(yīng)式網(wǎng)頁的用戶體驗(yàn)
優(yōu)酷官網(wǎng)做到了在手機(jī)屏幕上網(wǎng)頁布局適應(yīng)。字體、圖片、圖文排版等等也隨著屏幕分辨率改變而改變，讓受眾無需拖拉縮放網(wǎng)頁，可以舒適地瀏覽網(wǎng)頁。
我們經(jīng)常使用的教務(wù)系統(tǒng)網(wǎng)頁就沒那么好了，在電腦上瀏覽還不錯(cuò)，但是在手機(jī)上想登陸系統(tǒng)就不得不拖放網(wǎng)頁了。（截圖被放大了，在手機(jī)操作還是需要手動(dòng)拖放的）這樣給受眾瀏覽網(wǎng)頁帶來一定的不便。
所以為了應(yīng)對(duì)豐富的且不確定的屏幕分辨率，以及日益普及的手機(jī)屏幕的使用。要想讓你的網(wǎng)頁更受歡迎，能夠?qū)θ我庠O(shè)備進(jìn)行完美布局的響應(yīng)式網(wǎng)頁設(shè)計(jì)就顯得有必要了，繼續(xù)采用為pc而設(shè)的固定網(wǎng)頁布局（固定寬度一般為960px），將逐漸被受眾拋棄。
響應(yīng)式網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)
響應(yīng)式網(wǎng)頁設(shè)計(jì)，有伊?！ゑR科特（Ethan Marcotte）提出。在A List Apart發(fā)表了一篇開創(chuàng)性的文章，將三種已有的開發(fā)技術(shù)（彈性/流體網(wǎng)格布局、媒體查詢、彈性圖片）整合起來，并命名為響應(yīng)式網(wǎng)頁設(shè)計(jì)。
HTML5強(qiáng)調(diào)簡化標(biāo)簽，僅鏈接那些我們必須的css、javascript和圖片文件，也可以在表單提交等基本網(wǎng)頁交互場(chǎng)景中對(duì)用戶做出反饋，一般不需要javascript表單處理流程。所以HTML5允許我們創(chuàng)建更加簡潔和快速的代碼。
CSS3為響應(yīng)式設(shè)計(jì)和更多創(chuàng)新奠定了基礎(chǔ)。對(duì)于在老版本瀏覽器中無法解析的屬性，不會(huì)造成任何問題。這使我們能夠?yàn)槟切┫冗M(jìn)的瀏覽器進(jìn)行漸進(jìn)增強(qiáng)設(shè)計(jì)，同時(shí)為老版本瀏覽器提供合理的降級(jí)處理。
CSS3還可以靈活、輕量地解決日常的網(wǎng)頁設(shè)計(jì)問題（界面元素創(chuàng)建圓角效果、漸變效果、動(dòng)畫效果）
所以現(xiàn)今的響應(yīng)式網(wǎng)頁設(shè)計(jì)以流體網(wǎng)格布局、媒體查詢、彈性圖片三項(xiàng)組成技術(shù)和HTML5和CSS3代碼工具實(shí)現(xiàn)
前端與后端交互
一個(gè)web的正常運(yùn)作，需要前后端數(shù)據(jù)交互。
訪問者根據(jù)后臺(tái)寫好的url瀏覽網(wǎng)頁（網(wǎng)頁的結(jié)構(gòu)、樣式是前端開發(fā)工程師做好的），以GET和POST的兩種方式從前端發(fā)送請(qǐng)求參數(shù)給后端，后端根據(jù)查詢條件和前端的請(qǐng)求參數(shù)從數(shù)據(jù)庫里去查詢相應(yīng)的數(shù)據(jù)表以獲得相應(yīng)的內(nèi)容或者圖片地址信息 ，再發(fā)回到前端。（我們所說的網(wǎng)頁設(shè)計(jì)與制作就是前端開發(fā)的范疇）
