1.專業(yè)術(shù)語(yǔ)的英文解釋
| 中文 | 英文 |
|---|---|
| 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) | Responsive Web Design |
| 超文本標(biāo)記語(yǔ)言 | Hyper Text Markup Language(HTML) |
| 視口 | viewport |
| 媒體查詢 | media queries |
| 流體網(wǎng)格布局 | fluid grid |
| 彈性圖片 | flexible images |
| 彈性/流式 | fluid/flexible |
| 層疊樣式表 | Cascading Style Sheets （C S S） |
| 前端/后端 | Frontend /Backend |
專業(yè)術(shù)語(yǔ)的名詞解釋
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)：是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局炮沐，其理念是：集中創(chuàng)建頁(yè)面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局回怜； 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)出來(lái)的頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境大年，以一種彈性化來(lái)適當(dāng)調(diào)整當(dāng)前頁(yè)面所適應(yīng)的分辨率、圖片尺寸及相關(guān)腳本功能等
RWD的三項(xiàng)組成科技：彈性/流體網(wǎng)格布局：默認(rèn)情況下顯示適用于[移動(dòng)電話]的“流體網(wǎng)格”玉雾。網(wǎng)格布局其實(shí)是根據(jù)當(dāng)前瀏覽器或手機(jī)屏幕所適配的字體大小翔试，當(dāng)你點(diǎn)擊選擇進(jìn)入新的超鏈接時(shí)，顯示文本便會(huì)根據(jù)屏幕縮放自動(dòng)重排复旬，網(wǎng)頁(yè)根據(jù)視口大小在任何媒體查詢之間靈活伸縮修正樣式垦缅。
彈性圖片：彈性圖片它的效果可以根據(jù)我們的用戶所在使用的不同屏幕尺寸來(lái)改變圖片的像素，從而適應(yīng)當(dāng)前的瀏覽環(huán)境驹碍。以前沒(méi)有RWD的時(shí)候失都，我們的屏幕只能顯示原本設(shè)置好的畫(huà)面大小，并不能具體地調(diào)整頁(yè)面顯示的效果幸冻。
媒體查詢：媒體查詢可以讓我們?cè)谀承l件下（如寬度和高度為多少的情況下）為網(wǎng)頁(yè)應(yīng)用樣式粹庞。出自 響應(yīng)式Web設(shè)計(jì)HTML5和CSS3實(shí)戰(zhàn) 一書(shū)
媒體查詢實(shí)質(zhì)上是針對(duì)所有的媒體的基本樣式，在此基礎(chǔ)上洽损，再針對(duì)不同能力的設(shè)備來(lái)加以拓展庞溜，從而便于我們達(dá)到良好的視覺(jué)。
可用于媒體查詢的特性包括 width，height和color流码。通過(guò)媒體查詢又官，即使不修改內(nèi)容本身，也可讓網(wǎng)頁(yè)適配不同的設(shè)備漫试。
RWD中的前端和后端的關(guān)系六敬、區(qū)別？
前端就大概等同于網(wǎng)頁(yè)設(shè)計(jì)師驾荣，后端就是會(huì)寫(xiě)程序的網(wǎng)頁(yè)開(kāi)發(fā)工作者（偏計(jì)算機(jī)系專業(yè)）外构，而我們所學(xué)的傾向于前端工程師的內(nèi)容。
前端：包括網(wǎng)頁(yè)的設(shè)計(jì)播掷，制作頁(yè)面外觀以及頁(yè)面的交互設(shè)計(jì)审编，其實(shí)就是用戶所看到的表象是屬于前端的范圍。
后端：后端則更多的是與數(shù)據(jù)庫(kù)進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯歧匈。需要考慮的是如何實(shí)現(xiàn)功能垒酬、數(shù)據(jù)的存取、平臺(tái)的穩(wěn)定性與性能等件炉。偏向技術(shù)性的開(kāi)發(fā)設(shè)計(jì)勘究。
關(guān)于前端和后端的詳細(xì)區(qū)別
2.我們?yōu)槭裁葱枰绊憫?yīng)式網(wǎng)頁(yè)設(shè)計(jì)”？
一直以來(lái)斟冕，以往的web網(wǎng)頁(yè)設(shè)計(jì)多數(shù)是根據(jù)后端程序員所編寫(xiě)的固定代碼來(lái)顯示頁(yè)面乱顾，并不能根據(jù)當(dāng)前用戶所使用的設(shè)備來(lái)具體調(diào)整。這樣來(lái)一方面不僅得不到良好的用戶體驗(yàn)宫静，而且還加重了程序員的工作量，程序員需要編出好多套不同樣式的代碼券时。不過(guò)到現(xiàn)在孤里，我們可以通過(guò)使用RWD來(lái)根據(jù)用戶設(shè)備來(lái)具體調(diào)整顯示的頁(yè)面。
- 在以往，人們使用的設(shè)備更多是臺(tái)式和手提電腦炸枣，但隨著科技的發(fā)展虏等，手機(jī)的應(yīng)用范圍更多，手機(jī)開(kāi)始可以代替電腦的使用适肠。因而霍衫，由上圖可知，在2016年中下旬（10月左右）侯养，手機(jī)移動(dòng)端的使用率開(kāi)始超過(guò)電腦敦跌、平板的使用率，市場(chǎng)份額逐漸由手機(jī)移動(dòng)端位居榜首逛揩。
- 由此圖柠傍，我們可以得出移動(dòng)端的使用率較高麸俘，響應(yīng)式web開(kāi)發(fā)的市場(chǎng)也越來(lái)越大，通過(guò)RWD應(yīng)用惧笛，我們?cè)跒g覽網(wǎng)頁(yè)也會(huì)愈加流暢从媚、自然。
那么RWD的優(yōu)越何在呢患整？
- 該網(wǎng)頁(yè)沒(méi)有運(yùn)用RWD拜效，當(dāng)我們使用手機(jī)來(lái)瀏覽其網(wǎng)頁(yè)，它所顯示的圖并不完整并级，缺少畫(huà)面的動(dòng)態(tài)感和畫(huà)面感拂檩。而且如果我們想在手機(jī)上選擇一個(gè)新的超鏈接，需要移動(dòng)或放大才容易點(diǎn)擊嘲碧。
- 該網(wǎng)頁(yè)使用了RWD,當(dāng)我們?cè)诰W(wǎng)頁(yè)上瀏覽稻励，它會(huì)自動(dòng)適配我們的設(shè)備，并且可以完整的看到整個(gè)頁(yè)面愈涩，畫(huà)面感也有望抽，我的母校的計(jì)算機(jī)教師挺有水平的。 從二圖對(duì)比可知履婉，使用了RWD的頁(yè)面效果會(huì)好很多煤篙，可以提高瀏覽者的閱讀興趣。
