響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
- 由Ethan Marcotee 在2010年發(fā)明的证薇。
大家可前往他的文章閱讀更多內(nèi)容浑度。 - 英文：Responsive Web design（簡(jiǎn)稱(chēng)RWD）
響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是：
頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶(hù)行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)箩张、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整饮笛。具體的實(shí)踐方式由多方面組成缎浇，包括彈性網(wǎng)格和布局赴肚、圖片誉券、CSS media query的使用等刊愚。無(wú)論用戶(hù)正在使用筆記本還是iPad鸥诽，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等拳昌，以適應(yīng)不同設(shè)備炬藤；換句話(huà)說(shuō)碴里，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶(hù)的設(shè)備環(huán)境咬腋。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本根竿。這樣就珠，我們就可以不必為不斷到來(lái)的新設(shè)備做專(zhuān)門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了嗓违。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design图贸，通呈枞眨縮寫(xiě)為 RWD），又稱(chēng)為自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)涕滋、回應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)宾肺。是一種現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)方法锨用，該設(shè)計(jì)基于 CSS3 的媒介查詢(xún)（Media Query）特性使得網(wǎng)頁(yè)適應(yīng)不同設(shè)備隘谣，即根據(jù)設(shè)備的分辨率和縮放自動(dòng)重新布局寻歧，同時(shí)減少縮放、平移和滾動(dòng)猾封。
-
必要性
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是為了讓網(wǎng)站能夠兼容多個(gè)終端忘衍。為各個(gè)終端制作終極版本卿城。
為什么響應(yīng)式設(shè)計(jì)如此必要呢瑟押？從statcounter的數(shù)據(jù)我們可以得到答案：
由數(shù)據(jù)可看出手機(jī)終端的持有率已經(jīng)在電腦終端之上，且呈上升狀態(tài)氢烘。 -
案例
我們也看看哪些網(wǎng)站應(yīng)用了響應(yīng)式
百度電腦終端
百度手機(jī)終端
百度出應(yīng)用了響應(yīng)式的百度電腦與手機(jī)呈現(xiàn)的內(nèi)容截然不同播玖。
那么沒(méi)應(yīng)用RWD的網(wǎng)站又有哪些呢蜀踏？
中山大學(xué)的官網(wǎng)沒(méi)有應(yīng)用響應(yīng)式設(shè)計(jì)。
可以看出沒(méi)有應(yīng)用RWD的中山大學(xué)官網(wǎng)在手機(jī)就顯得非常不方便殖熟。
RWD的三項(xiàng)組成科技
- 流式網(wǎng)格：概念要求頁(yè)面元素使用相對(duì)單位如百分比或字體排印學(xué)調(diào)整大小菱属，而不是絕對(duì)的單位如像素或點(diǎn)纽门；
- 靈活的圖片：也以相對(duì)單位調(diào)整大小（最大到 100%），以防止它們顯示在包含它們的元素外面瘟滨；
- 媒體查詢(xún)：允許網(wǎng)頁(yè)根據(jù)訪(fǎng)問(wèn)站點(diǎn)設(shè)備的特點(diǎn)而使用不同 CSS 樣式規(guī)則杂瘸，最常用的是瀏覽器的寬度伙菊。
RWD和前後端的關(guān)系
-
前端
前端（圖片來(lái)源于網(wǎng)絡(luò)）
前端對(duì)于網(wǎng)站來(lái)說(shuō)镜硕，通常是指兴枯，網(wǎng)站的前臺(tái)部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開(kāi)發(fā)悠夯，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺(jué)設(shè)計(jì)沦补，前端開(kāi)發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)夕膀，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級(jí)版本HTML5裹刮、CSS3捧弃，以及SVG等擦囊。
HTML瞬场、CSS贯被、JavaScript
這三個(gè)是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中看幼，在頁(yè)面的布局時(shí)诵姜， HTML將元素進(jìn)行定義搏熄，CSS對(duì)展示的元素進(jìn)行定位心例，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)很簡(jiǎn)單摆寄，但這里面需要掌握的東西絕對(duì)不會(huì)少微饥。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚矩肩、弄明白黍檩，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手刽酱。
- HTML
指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)，這個(gè)也是我們網(wǎng)頁(yè)最常用普通的語(yǔ)言了瞧捌，經(jīng)歷了多個(gè)版本的發(fā)展棵里，已經(jīng)發(fā)展到5.0版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范姐呐，已普遍升級(jí)到了XHTML殿怜，XHTML 指可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)曙砂，是更嚴(yán)格更純凈的 HTML 代碼头谜，XHTML 的目標(biāo)是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的鸠澈，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML，是一個(gè) W3C 標(biāo)準(zhǔn)笑陈。W3C 將 XHTML 定義為最新的HTML版本末荐。所有新的瀏覽器都支持 XHTML。[1]
- CSS
級(jí)聯(lián)樣式表（Cascading Style Sheet）簡(jiǎn)稱(chēng)“CSS”新锈，通常又稱(chēng)為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的眶熬。比如妹笆，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線(xiàn)娜氏，這就是一種風(fēng)格拳缠。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性贸弥。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀(guān)窟坐。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀(guān)以及創(chuàng)建特殊效果的能力臣疑。[2]
- Javascript
是一種由Netscape的LiveScript發(fā)展而來(lái)的原型化繼承的面向?qū)ο?/a>的動(dòng)態(tài)類(lèi)型的區(qū)分大小寫(xiě)的客戶(hù)端腳本語(yǔ)言，主要目的是為了解決服務(wù)器端語(yǔ)言讯沈，比如Perl，遺留的速度問(wèn)題婿奔，為客戶(hù)提供更流暢的瀏覽效果。當(dāng)時(shí)服務(wù)端需要對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證萍摊，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有28.8kbps冰木，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。于是Netscape的瀏覽器Navigator加入了Javascript片酝，提供了數(shù)據(jù)驗(yàn)證的基本功能囚衔。 [3]
后端
后端就是網(wǎng)站的邏輯部分雕沿，主要涉及數(shù)據(jù)庫(kù)练湿，動(dòng)態(tài)語(yǔ)言如PHP、ASP审轮、JSP等
后臺(tái)一般指的是管理員操作模塊肥哎，包括對(duì)網(wǎng)站內(nèi)容的更新、注冊(cè)會(huì)員管理等等疾渣，是網(wǎng)站的一個(gè)子模塊
后臺(tái)應(yīng)該是管理網(wǎng)站的篡诽，一般叫網(wǎng)站管理后臺(tái)，比如發(fā)文章啊榴捡，查看瀏覽數(shù)據(jù)啊等等杈女，對(duì)應(yīng)的也會(huì)有網(wǎng)站前臺(tái)，即訪(fǎng)客能看到的頁(yè)面吊圾，對(duì)了达椰，后臺(tái)肯定不能對(duì)訪(fǎng)客開(kāi)放的，沒(méi)人愿意讓訪(fǎng)客來(lái)修改自己網(wǎng)站文章的项乒。一般呢啰劲，你輸入http://www.xxx.com看到的就是網(wǎng)站前臺(tái)，有些網(wǎng)站呢檀何，你輸入http://www.xxx.com/admin/ 就能進(jìn)入到那個(gè)網(wǎng)站的管理后臺(tái)頁(yè)面了蝇裤，但是需要輸入賬戶(hù)密碼廷支。
(知乎作者：蒙奇D擼碼客)
前端后端（圖片來(lái)源于網(wǎng)絡(luò)）
可以看出前端是呈現(xiàn)給用戶(hù)的東西馍忽，后端是程序員開(kāi)發(fā)的地方蕊肥。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)所要做的就是通過(guò)后端來(lái)使前端在各個(gè)終端上切換自如慨代。（個(gè)人了解）
