響應式網(wǎng)頁設計

響應式網(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月份間手機在市場份額上超越電腦黍衙,由此可見在眾多電子設備中人們越來越傾向于選擇手機。


我國數(shù)據(jù).png

而從全球上來看荠诬,手機在市場份額上也在2016年10月至11月間開始超越電腦琅翻。


全球數(shù)據(jù).png

無法隨著屏幕分辨率改變網(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/

無標題1.png

無標題.png

非響應式網(wǎng)頁設計:http://youku.com/


優(yōu)酷2.png

前者圖片排版會隨著設備的大小有選擇地顯示是一張還是多張棠众。而后者卻無琳疏,且文字大小也無改變,使使用者看起來十分費力闸拿。

響應式網(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ā)框架。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末怨绣,一起剝皮案震驚了整個濱河市角溃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌篮撑,老刑警劉巖减细,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異咽扇,居然都是意外死亡邪财,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門质欲,熙熙樓的掌柜王于貴愁眉苦臉地迎上來树埠,“玉大人,你說我怎么就攤上這事嘶伟≡醣铮” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵九昧,是天一觀的道長绊袋。 經(jīng)常有香客問我,道長铸鹰,這世上最難降的妖魔是什么癌别? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮蹋笼,結(jié)果婚禮上展姐,老公的妹妹穿的比我還像新娘。我一直安慰自己剖毯,他們只是感情好圾笨,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著逊谋,像睡著了一般擂达。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上胶滋,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天板鬓,我揣著相機與錄音悲敷,去河邊找鬼。 笑死穗熬,一個胖子當著我的面吹牛镀迂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播唤蔗,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼探遵,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了妓柜?” 一聲冷哼從身側(cè)響起箱季,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎棍掐,沒想到半個月后藏雏,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡作煌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年掘殴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粟誓。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡奏寨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鹰服,到底是詐尸還是另有隱情病瞳,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布悲酷,位于F島的核電站套菜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏设易。R本人自食惡果不足惜逗柴,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望顿肺。 院中可真熱鬧戏溺,春花似錦、人聲如沸挟冠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽知染。三九已至,卻和暖如春斑胜,著一層夾襖步出監(jiān)牢的瞬間控淡,已是汗流浹背嫌吠。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留掺炭,地道東北人辫诅。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像涧狮,于是被迫代替她去往敵國和親炕矮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 這是去年寫的文章了,整理之后重新發(fā)一下涉枫,希望這篇文章還能有一些作用 —— 你升級 Windows10了嗎邢滑?—— 嗯...
    ClanS閱讀 575評論 0 1
  • 風輕輕的刮著, 雨瀟瀟的下著愿汰。 你的愛在何處困后, 我想放在心理。
    一本書一碗茶閱讀 156評論 0 0
  • 網(wǎng)上看的
    yangyy閱讀 145評論 0 0
  • 連續(xù)三天的大組會,小組會讓我看到自己的麻木渠脉,包括做主持人也是木偶人的狀態(tài)珊膜。亦辰助教說我走二天退三天,這股麻...
    徐麗紅閱讀 73評論 0 0