名詞解釋
| noun | 中譯 | 解釋 |
|---|---|---|
| RWD | 響應式web設計 | 網頁內容會隨著訪問它的視口及設備的不同而呈現(xiàn)不同的樣式 |
| viewport | 視口 | 瀏覽器中用于呈現(xiàn)網頁的區(qū)域 |
| 斷點 | 寬度臨界點柬批，跨過這個點布局就會發(fā)生顯著變化 | |
| flexible images | 彈性圖片 | 不給圖片設置固定尺寸，而是根據(jù)流體網格進行縮放倚舀，用于適應各種網格的尺寸 |
| media queries | 媒體查詢 | 可以針對不同的屏幕尺寸設置不同的樣式 |
| front-end | 前端 | 網站的前臺部分包括網站的表現(xiàn)層和結構層 |
| back-end | 后端 | 負責各種后臺編程語言,相關技術與框架,數(shù)據(jù)庫開發(fā),WEB安全等 |
響應式網頁設計的必要性
我們可以從以下兩張圖得出我們需要響應式網頁設計的理由姜挺。
2016全世界屏幕分辨率
全世界屏幕分辨率統(tǒng)計
從以上兩張圖我們可以得出以下主要的幾點：
- 媒體發(fā)展至今晰绎，出現(xiàn)在我們日常生活中的屏幕分辨率已經多種多樣數(shù)不甚數(shù)。
- 兩極的分辨率有著不可輕視的差別呛谜。
- 以360x640為代表的分辨率統(tǒng)計線從2016年至今穩(wěn)步上升在跳，而以1366x768為代表的的分辨率則持續(xù)微微下降，在2016七月中旬還被超過了隐岛。
從以上幾點可以總結到猫妙，僅滿足在臺式分辨率上展示網站網頁以及平臺已是不行的了
，還得滿足且適應在更小的多的分辨率（手機）上展示聚凹。這時割坠，響應式網頁設計的需要性就展現(xiàn)出來了齐帚。響應式網頁設計，能讓網頁內容會隨著訪問它的視口及設備的不同而呈現(xiàn)不同的樣式彼哼。為了網民更好更愜意的生活对妄，我們需要響應式網頁設計。
有無響應式網頁設計的例子對比
我們下來看看有的例子
分辨率為941x647
分辨率為375x667
網址在此：
響應式例子
再來看看沒有應用的例子
分辨率為970x1294
分辨率為375x667
網站在此：
無響應式例子
我們可以通過兩個例子的對比看出應用的響應式網頁設計的網頁能根據(jù)不同分辨率的顯示下排出舒適方便的版面敢朱，而反觀沒有應用的剪菱，無論分辨率如何變化，網頁版面始終不變拴签，要在小的多的屏幕上看原本應該出現(xiàn)在大屏幕上的網頁可是一件繁瑣累人的事情孝常。
RWD的組成科技
-
彈性網絡布局
可以簡便、完整篓吁、響應式地實現(xiàn)各種頁面布局茫因。 -
彈性圖片/媒體
不給圖片設置固定尺寸，而是根據(jù)流體網格進行縮放杖剪，用于適應各種網格的尺寸冻押。 -
媒體查詢
可以針對不同的屏幕尺寸設置不同的樣式。
有關RWD前后端的關系
在技術安排上盛嘿，前端負責網頁伺服器等客戶端展現(xiàn)的事情洛巢，基本包括所有可見部分的代碼編寫，如果三層架構的話,可以看做是UI層次兆。后端則負責數(shù)據(jù)庫和云端稿茉，編寫的代碼基本上都是提供給前端調用，而不需要處理UI的內容芥炭。兩者相當于一個著手于屏幕上的平面設計師另一個著手數(shù)據(jù)的計算機科學家漓库。
而基于HTML5和CSS3的響應式web設計并不需要以來服務端或后端方案。
要想了解更多有關RWD的知識园蝠，詳情點擊Ethan Marcotte的文章渺蒿。
