響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

本文內(nèi)容信息來(lái)源于網(wǎng)絡(luò)搜索與《響應(yīng)式web設(shè)計(jì)——HTML5和CSS3實(shí)戰(zhàn)》
附上RWD創(chuàng)始人Marcotte的博客鏈接 https://ethanmarcotte.com/

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)術(shù)語(yǔ)解釋

響應(yīng)式web設(shè)計(jì)（RWD）

該詞由Ethan Marcotte于2010年發(fā)明弦叶，指的是種利用CSS3 media queries規(guī)則來(lái)使網(wǎng)頁(yè)內(nèi)容隨著訪問(wèn)它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式的技術(shù)绰播。
采用頁(yè)面元素大小的相對(duì)單位，而非傳統(tǒng)設(shè)計(jì)使用的絕對(duì)單位锨亏，以確定頁(yè)面各組成元素的大小镇辉。圖片大小也是采用相對(duì)單位而靈活縮放知允，不至于在小屏幕的移動(dòng)設(shè)備上超出顯示區(qū)域撤防。

超文本標(biāo)記語(yǔ)言（HTML）

HTML即為超文本標(biāo)記語(yǔ)言习劫，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用节值。
超文本就是指頁(yè)面內(nèi)可以包含圖片、鏈接榜聂，甚至音樂(lè)、程序等非文字元素嗓蘑。
超文本標(biāo)記語(yǔ)言的結(jié)構(gòu)包括“頭”部分（英語(yǔ)：Head）须肆、和“主體”部分（英語(yǔ)：Body），其中“頭”部提供關(guān)于網(wǎng)頁(yè)的信息桩皿，“主體”部分提供網(wǎng)頁(yè)的具體內(nèi)容豌汇。
HTML5為超文本標(biāo)記語(yǔ)言的第五次重大修改版本。

層疊樣式表（CSS）

層疊樣式表RW是一種用來(lái)表現(xiàn)HTML標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用或標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集等文件樣式的計(jì)算機(jī)語(yǔ)言泄隔。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)拒贱，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制佛嬉，支持幾乎所有的字體字號(hào)樣式逻澳，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

JavaScript

JavaScript是一種解釋性腳本語(yǔ)言（代碼不進(jìn)行預(yù)編譯）暖呕，主要用來(lái)向HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）頁(yè)面添加交互行為斜做，可以直接嵌入HTML頁(yè)面，但寫(xiě)成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離湾揽。
跨平臺(tái)特性瓤逼，在絕大多數(shù)瀏覽器的支持下笼吟，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux霸旗、Mac贷帮、Android、iOS等）诱告。

窗口（window）與視口（viewport）

在 Windows的作圖函數(shù)中撵枢，涉及邏輯坐標(biāo)到設(shè)備坐標(biāo)的轉(zhuǎn)換。這里提到的窗口（window）蔬啡、視口(viewport)是對(duì)應(yīng)的概念诲侮。
視口是與設(shè)備相關(guān)的一個(gè)矩形區(qū)域，坐標(biāo)單位是與設(shè)備相關(guān)的“像素”箱蟆，大多數(shù)情況下沟绪，視口與客戶區(qū)相同。窗口的坐標(biāo)是邏輯坐標(biāo)空猜，與設(shè)備無(wú)關(guān)绽慈，可能是像素、毫米或者英寸辈毯。
窗口坐標(biāo)的原點(diǎn)與視口坐標(biāo)的原點(diǎn)始終對(duì)應(yīng)于同一點(diǎn)坝疼，對(duì)于同一個(gè)圖形，用窗口坐標(biāo)系統(tǒng)表達(dá)的該區(qū)域的長(zhǎng)和寬與視口的坐標(biāo)系統(tǒng)表達(dá)的長(zhǎng)和寬是不同的谆沃。
二者就定義了這兩個(gè)坐標(biāo)系統(tǒng)的比例關(guān)系钝凶。程序作圖時(shí)，使用的坐標(biāo)總是是窗口坐標(biāo)唁影。而實(shí)際的顯示或輸出設(shè)備卻各有自己的坐標(biāo)耕陷。

Sublime Text

Sublime Text 是一個(gè)代碼編輯器（Sublime Text 2是收費(fèi)軟件，但可以無(wú)限期試用）据沈，也是HTML和散文先進(jìn)的文本編輯器哟沫。Sublime Text是由程序員Jon Skinner于2008年1月份所開(kāi)發(fā)出來(lái)，它最初被設(shè)計(jì)為一個(gè)具有豐富擴(kuò)展功能的Vim锌介。
Sublime Text具有漂亮的用戶界面和強(qiáng)大的功能嗜诀，例如代碼縮略圖，Python的插件孔祸，代碼段等隆敢。還可自定義鍵綁定，菜單和工具欄崔慧。
Sublime Text 的主要功能包括：拼寫(xiě)檢查筑公，書(shū)簽，完整的 Python API 尊浪， Goto 功能匣屡，即時(shí)項(xiàng)目切換封救，多選擇，多窗口等等捣作。Sublime Text 是一個(gè)跨平臺(tái)的編輯器誉结，同時(shí)支持Windows、Linux券躁、Mac OS X等操作系統(tǒng)惩坑。

VIM

Vim是一個(gè)類(lèi)似于Vi的著名的功能強(qiáng)大、高度可定制的文本編輯器也拜，在Vi的基礎(chǔ)上改進(jìn)和增加了很多特性以舒。Vi，是一款由加州大學(xué)伯克利分校研究開(kāi)發(fā)的文本編輯器慢哈。

Visual Studio

是美國(guó)微軟公司的開(kāi)發(fā)工具包系列產(chǎn)品蔓钟。VS是一個(gè)基本完整的開(kāi)發(fā)工具集，它包括了整個(gè)軟件生命周期中所需要的大部分工具卵贱，如UML工具滥沫、代碼管控工具、集成開(kāi)發(fā)環(huán)境(IDE)等等键俱。
所寫(xiě)的目標(biāo)代碼適用于微軟支持的所有平臺(tái)兰绣，包括Microsoft Windows、Windows Mobile编振、Windows CE缀辩、.NET Framework、.NET Compact Framework和Microsoft Silverlight 及Windows Phone踪央。

Notepad

notepad（記事本）是代碼編輯器或WINDOWS中的小程序臀玄，用于文本編輯，在文字編輯方面與Windows寫(xiě)字板功能相當(dāng)杯瞻。是一款開(kāi)源、小巧炫掐、免費(fèi)的純文本編輯器魁莉。
Notepad內(nèi)置支持多達(dá) 27 種語(yǔ)法高亮度顯示(囊括各種常見(jiàn)的源代碼、腳本募胃，值得一提的是旗唁，完美支持 .nfo 文件查看)，也支持自定義語(yǔ)言痹束。

RWD的三項(xiàng)組成科技

流動(dòng)網(wǎng)格（Fluid Grids）

流動(dòng)網(wǎng)格指的是采用頁(yè)面元素大小的相對(duì)單位检疫，而非傳統(tǒng)設(shè)計(jì)使用的絕對(duì)單位，以確定頁(yè)面各組成元素的大小祷嘶。

靈活的圖片（Flexible Images）

靈活的圖片指的是圖片大小采用相對(duì)單位而可靈活縮放屎媳，不至于在小屏幕的移動(dòng)設(shè)備上超出顯示區(qū)域夺溢。

媒體查詢（Media Queries）

媒體查詢?cè)试S網(wǎng)頁(yè)根據(jù)訪問(wèn)站點(diǎn)設(shè)備的特點(diǎn)而使用不同 CSS 樣式規(guī)則，最常用的是瀏覽器的寬度烛谊。

RWD和前后端的關(guān)系

與前端的關(guān)系

前端對(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等葫盼。

與后端的關(guān)系

通過(guò)編寫(xiě)后端的資料庫(kù)來(lái)改變前端的呈現(xiàn)效果，也意味說(shuō)后端是與數(shù)據(jù)庫(kù)進(jìn)行交互以處理相應(yīng)的事務(wù)薄扁，后端需要考慮的是如何實(shí)現(xiàn)功能剪返、數(shù)據(jù)的存取、平臺(tái)的穩(wěn)定性與性能等邓梅。

為什么我們需要“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”脱盲？（圖中數(shù)據(jù)來(lái)自gs.statcounter.com）

全球桌面與平板電腦市場(chǎng)份額.png

從該圖片我們可以看出如今網(wǎng)絡(luò)設(shè)備的多樣化，并且可以看出移動(dòng)用戶總量總體處于上升階段日缨，越來(lái)越多的人選擇使用移動(dòng)客戶端來(lái)登錄網(wǎng)站钱反、使用網(wǎng)絡(luò)。

全球屏幕分辨率.png

從這圖片也可看出設(shè)備的分辨率差異巨大匣距，而以往的網(wǎng)頁(yè)設(shè)計(jì)方式僅能夠適應(yīng)單一分辨率面哥，為了滿足各平臺(tái)用戶的需求以及優(yōu)化體驗(yàn)才能夠帶來(lái)更高的點(diǎn)擊率，響應(yīng)式網(wǎng)絡(luò)設(shè)計(jì)應(yīng)運(yùn)而生毅待。

采用RWD設(shè)計(jì)與未采用該設(shè)計(jì)的例子進(jìn)行對(duì)比

采用RWD設(shè)計(jì)

淘寶

采用非RWD設(shè)計(jì)

簡(jiǎn)書(shū)

對(duì)比帶來(lái)的分析

運(yùn)用RWD設(shè)計(jì)的能夠不同分辨率中進(jìn)行自適應(yīng)化尚卫，有利于滿足電腦與手機(jī)等用戶對(duì)該軟件的滿意程度，而沒(méi)有運(yùn)用RWD設(shè)計(jì)的則會(huì)對(duì)較低分辨率的用戶瀏覽造成影響尸红，破壞用戶體驗(yàn)吱涉。