響應式網(wǎng)頁設計(RWD):
一種新的網(wǎng)站設計模式矢腻,用此構(gòu)建的網(wǎng)站能自動適應不同的訪問設備(桌面電腦瓶殃、平板電腦 智能手機)敲茄,方便用戶閱讀和導航瀏覽位谋,從而提供更好的用戶體驗。
超文本標記語言(HTML):
就是指頁面內(nèi)可以包含圖片堰燎、鏈接掏父,甚至音樂等非文字元素。
超文本標記語言的結(jié)構(gòu)包括“頭”部分(Head)秆剪、和“主體”部分(Body)赊淑,其中“頭”部提供關(guān)于網(wǎng)頁的信息,“主體”部分提供網(wǎng)頁的具體內(nèi)容仅讽。
視口(viewport):即
瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域陶缺。
媒體查詢(media query) ; 流式/彈性網(wǎng)絡布局(fluid grid);前端(frontend); 后端(backend)會在以下文章隨文章內(nèi)容分別做詳細解釋
為何需要"響應式網(wǎng)頁設計" ?
在2016年以前洁灵,手機與電腦在市場份額上饱岸,電腦原是高于手機的,但隨著科技的進步徽千,信號的覆蓋種種原因苫费,手機越來越受歡迎。
單就國內(nèi)來看双抽,在2016年3月份間手機在市場份額上超越電腦黍衙,由此可見在眾多電子設備中人們越來越傾向于選擇手機。
而從全球上來看荠诬,手機在市場份額上也在2016年10月至11月間開始超越電腦琅翻。
無法隨著屏幕分辨率改變網(wǎng)頁的大小的網(wǎng)站位仁,不僅給用戶的瀏覽帶來及其不便的體驗,也會使網(wǎng)站 在各種同類型網(wǎng)站的層出不窮(又或者有使用起來更方便的網(wǎng)站)的現(xiàn)實情況下失去競爭力方椎。
響應式網(wǎng)頁設計能使網(wǎng)站在各種移動端設備上都能布局合理
因此聂抢,響應式網(wǎng)頁設計是十分必要的。
舉兩個響應式網(wǎng)頁設計與非響應式網(wǎng)頁設計的直觀例子:
響應式網(wǎng)頁設計:https://www.microsoft.com/zh-cn/
非響應式網(wǎng)頁設計:http://youku.com/
前者圖片排版會隨著設備的大小有選擇地顯示是一張還是多張棠众。而后者卻無琳疏,且文字大小也無改變,使使用者看起來十分費力闸拿。
響應式網(wǎng)站設計有三個關(guān)鍵組成部分:
1.媒體查詢(media query)
2.流動/彈性網(wǎng)絡布局(fluid grid)
3.彈性圖片/媒體
媒體查詢(media query)
“media”是用來指定特定的媒體類型空盼,媒體查詢能在不同的條件下使用不同的樣式,使頁面在不同在終端設備下達到不同的渲染效果新荤。
Media Queries有其自己的使用規(guī)則揽趾。
流式/彈性網(wǎng)絡布局(fluid grid)
網(wǎng)站的布局必須對顯示該網(wǎng)站的設備的尺寸作出反應并適應該尺寸。流體網(wǎng)格布局為創(chuàng)建與顯示網(wǎng)站的設備相符的不同布局提供了一種可視化的方式苛骨。
(例如:使用流體網(wǎng)絡布局為桌面計算機篱瞎、平板電腦或手機其中每種設備指定布局。通過哪種設備使用網(wǎng)站痒芝,將使用相應的布局顯示網(wǎng)站)
彈性圖片/媒體
彈性圖片/媒體指的是不給它們設置固定尺寸俐筋,而是根據(jù)流體網(wǎng)格進行縮放,用于適應各種網(wǎng)格的尺寸严衬。
Ethan Marcotte 在2010年發(fā)明了“響應式Web設計”這個名字澄者,他的“響應式Web設計”就是通過這以上三個關(guān)鍵組成部分實現(xiàn)的。有興趣可以瀏覽他這篇描述自己想法的文章请琳。http://alistapart.com/article/responsive-web-design
RWD(響應式網(wǎng)站設計)和前后端的關(guān)系
前端(frontend):
對于網(wǎng)站來說粱挡,前端通常是指,網(wǎng)站的前臺部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層单起。
一般分為前端設計和前端開發(fā),前端設計一般可以理解為網(wǎng)站的視覺設計劣坊,前端開發(fā)則是網(wǎng)站的前臺代碼實現(xiàn)嘀倒。
HTML、CSS局冰、JavaScript是前端開發(fā)中最基本也是最必須的三個技能测蘑。前端的開發(fā)中,在頁面的布局時康二, HTML將元素進行定義碳胳,CSS對展示的元素進行定位,再通過JavaScript實現(xiàn)相應的效果和交互沫勿。
后端(backend):
大多數(shù)后端系統(tǒng)需要連接到存儲應用程序數(shù)據(jù)的數(shù)據(jù)庫挨约。
因此后端是網(wǎng)站信息管理味混,更多的是與數(shù)據(jù)庫進行交互以處理相應的業(yè)務邏輯。需要考慮的是如何實現(xiàn)功能诫惭、數(shù)據(jù)的存取翁锡、平臺的穩(wěn)定性與性能等。
后端開發(fā)人員需要更多地了解PHP Web框架夕土,Ruby on Rails馆衔,ASP.NET MVC或任何正用于構(gòu)建應用程序的服務器端Web開發(fā)框架。