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

名詞解釋

響應(yīng)式web設(shè)計(jì):基于HTML5和css3的RWD響應(yīng)式web設(shè)計(jì)踱侣,頁(yè)面內(nèi)容會(huì)隨著視口及設(shè)備的不同而呈現(xiàn)不同的樣式埠戳,是利用彈性網(wǎng)格布局,彈性圖片瘟判、媒體怨绣、媒體查詢(xún)等技術(shù)實(shí)現(xiàn)的。

Internet網(wǎng)絡(luò):通常所說(shuō)的互聯(lián)網(wǎng)拷获。

www:萬(wàn)維網(wǎng)篮撑,由Internet提供的一種網(wǎng)頁(yè)瀏覽器服務(wù)。

URL:統(tǒng)一資源定位符刀诬,俗稱(chēng)“網(wǎng)址”咽扇。

DNS:域名解析系統(tǒng)

HTTP:超文本傳輸協(xié)議,詳細(xì)規(guī)定瀏覽器和萬(wàn)維網(wǎng)服務(wù)器之間互相通信的規(guī)則陕壹。

web:互聯(lián)網(wǎng)的使用環(huán)境质欲,通常稱(chēng)為網(wǎng)頁(yè)。

w3c組織:萬(wàn)維網(wǎng)聯(lián)盟糠馆。

JavaScript:將靜態(tài)頁(yè)面轉(zhuǎn)化為動(dòng)態(tài)頁(yè)面嘶伟,為頁(yè)面添加動(dòng)態(tài)效果。

引用RWD教科書(shū)

響應(yīng)式web設(shè)計(jì)是有Ethan Marcotte在2010年提出的又碌,他在A List Part 上發(fā)表了一篇文章http://www.alistpart.com/articles/responsive-web-design/九昧,文章綜合運(yùn)用了彈性網(wǎng)格布局,彈性圖片/媒體毕匀,媒體查詢(xún)這三種技術(shù)铸鹰。

我認(rèn)為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是互聯(lián)網(wǎng)時(shí)代的產(chǎn)物,由以下兩幅圖證明我的觀點(diǎn)皂岔。

Desktop vs Mobile vs Tablet Market Share China Jan - Dec 2016

根據(jù)市場(chǎng)調(diào)查機(jī)構(gòu)statcounter 2016年的中國(guó)的手機(jī)市場(chǎng)與臺(tái)式電腦市場(chǎng)與平板市場(chǎng)對(duì)比蹋笼,發(fā)現(xiàn)在16年三月中旬臺(tái)式電腦的市場(chǎng)占有率和手機(jī)市場(chǎng)占有率有了交叉點(diǎn),之后手機(jī)市場(chǎng)占有率逐漸上升躁垛,而臺(tái)式電腦占有率逐漸下降剖毯,說(shuō)明現(xiàn)在的中國(guó)手機(jī)使用者遠(yuǎn)遠(yuǎn)比臺(tái)式電腦使用者多。

Desktop vs Mobile vs Tablet Market Share Worldwide Jan-Dec 2016

不僅僅在中國(guó)教馆,世界范圍內(nèi)三個(gè)市場(chǎng)占有率的比較也在說(shuō)明手機(jī)用戶在全球的數(shù)量已經(jīng)在2016年十月中旬就已經(jīng)超過(guò)了電腦用戶逊谋。

由于手機(jī)用戶數(shù)量的上升,加上智能手機(jī)時(shí)代的來(lái)臨土铺,手機(jī)已經(jīng)不僅僅具有打電話發(fā)短信這些功能了胶滋,能上網(wǎng)進(jìn)行瀏覽是現(xiàn)代智能手機(jī)的基本功能板鬓。為此網(wǎng)頁(yè)的設(shè)計(jì)者就不僅僅要考慮網(wǎng)頁(yè)在電腦上的顯示效果了,也要考慮隨著互聯(lián)網(wǎng)時(shí)代的到來(lái)镀钓,許許多多不同產(chǎn)品的屏幕大小穗熬,網(wǎng)頁(yè)美觀,網(wǎng)頁(yè)布局等因素丁溅,所以響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)也應(yīng)運(yùn)而生唤蔗。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基于HTML5和css3的RWD響應(yīng)式web設(shè)計(jì),頁(yè)面內(nèi)容會(huì)隨著視口及設(shè)備的不同而呈現(xiàn)不同的樣式窟赏,是利用彈性網(wǎng)格布局妓柜,彈性圖片、媒體涯穷、媒體查詢(xún)等技術(shù)實(shí)現(xiàn)的棍掐。由于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不僅可以滿足網(wǎng)站設(shè)計(jì)者的需求還可以滿足不同客戶端用戶的需求,所以如今很多網(wǎng)站都使用了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)拷况,如:

科技媒體TNW是使用了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的 https://thenextweb.com/

TNW網(wǎng)截圖

而天貓則沒(méi)有使用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) https://www.tmall.com/

天貓官網(wǎng)截圖

通過(guò)以上兩組對(duì)比作煌,可以很明顯的看出使用了RWD技術(shù)和不使用的區(qū)別,天貓?jiān)谑謾C(jī)網(wǎng)頁(yè)瀏覽時(shí)用戶需要不停地用手指縮放赚瘦,十分不方便粟誓,而TNW適配不同顯示器的大小,圖片和文字都能清晰的看見(jiàn)起意,給了用戶很好的感官體驗(yàn)鹰服。

之所以可以滿足不同顯示器的需求,是因?yàn)閣eb需要三個(gè)標(biāo)準(zhǔn)揽咕,分別是結(jié)構(gòu)標(biāo)準(zhǔn)悲酷,表現(xiàn)標(biāo)準(zhǔn),行為標(biāo)準(zhǔn)亲善。結(jié)構(gòu)標(biāo)準(zhǔn)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類(lèi)设易,主要包括兩個(gè)部分:XML和HTML;表現(xiàn)標(biāo)準(zhǔn)用于設(shè)置網(wǎng)頁(yè)元素的版式蛹头、顏色亡嫌、大小等外觀樣式,主要指的是CSS掘而;行為標(biāo)準(zhǔn)是指網(wǎng)頁(yè)模型的定義及交互的編寫(xiě),主要包括兩個(gè)部分:DOM和ECMAScript于购。擁有這三個(gè)科技的web袍睡,就有了之前網(wǎng)頁(yè)沒(méi)有的優(yōu)點(diǎn):

1.提高頁(yè)面瀏覽速度

2.使網(wǎng)站更易于維護(hù)

3.降低網(wǎng)站流量費(fèi)用

4.更容易被搜尋引擎搜索

5.內(nèi)容能被更廣泛的設(shè)備訪問(wèn)

6.讓W(xué)eb的發(fā)展前景更廣闊

而響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的前端和后端借用老師的上課課件圖片形象的表明

老師的上課課件圖

前端泛指Web前端,也就是在Web應(yīng)用中用戶可以看得見(jiàn)碰得著的東西肋僧。包括Web頁(yè)面的結(jié)構(gòu)斑胜、Web的外觀視覺(jué)表現(xiàn)以及Web層面的交互實(shí)現(xiàn)控淡。

前端開(kāi)發(fā)人員:平面設(shè)計(jì)師,前端工程師

需要精通JS止潘,能熟練應(yīng)用JQuery掺炭,懂CSS,能熟練運(yùn)用這些知識(shí)凭戴,進(jìn)行交互效果的開(kāi)發(fā)涧狮。

Web后端:后端更多的是與數(shù)據(jù)庫(kù)進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯。需要考慮的是如何實(shí)現(xiàn)功能么夫、數(shù)據(jù)的存取者冤、平臺(tái)的穩(wěn)定性與性能等。

后端工程師需會(huì)寫(xiě)Java代碼档痪,會(huì)寫(xiě)SQL語(yǔ)句涉枫,能做簡(jiǎn)單的數(shù)據(jù)庫(kù)設(shè)計(jì),會(huì)Spring和iBatis腐螟,懂一些設(shè)計(jì)模式等愿汰。

所以一個(gè)優(yōu)秀的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是離不開(kāi)前端和后端的工作人員的,后端工程師需要為前端的工程師和平面設(shè)計(jì)服務(wù)乐纸。

以上是我的上課體驗(yàn)以及自我思考衬廷。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末艰亮,一起剝皮案震驚了整個(gè)濱河市份氧,隨后出現(xiàn)的幾起案子图焰,更是在濱河造成了極大的恐慌兄朋,老刑警劉巖荣回,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泡仗,死亡現(xiàn)場(chǎng)離奇詭異伏尼,居然都是意外死亡咆蒿,警方通過(guò)查閱死者的電腦和手機(jī)久窟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)秩冈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人斥扛,你說(shuō)我怎么就攤上這事入问。” “怎么了稀颁?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵芬失,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我匾灶,道長(zhǎng)棱烂,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任阶女,我火速辦了婚禮颊糜,結(jié)果婚禮上哩治,老公的妹妹穿的比我還像新娘。我一直安慰自己衬鱼,他們只是感情好业筏,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著鸟赫,像睡著了一般蒜胖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上惯疙,一...
    開(kāi)封第一講書(shū)人閱讀 49,046評(píng)論 1 285
  • 那天翠勉,我揣著相機(jī)與錄音,去河邊找鬼霉颠。 笑死对碌,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蒿偎。 我是一名探鬼主播朽们,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼诉位!你這毒婦竟也來(lái)了骑脱?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤苍糠,失蹤者是張志新(化名)和其女友劉穎叁丧,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體岳瞭,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拥娄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了瞳筏。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稚瘾。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖姚炕,靈堂內(nèi)的尸體忽然破棺而出摊欠,到底是詐尸還是另有隱情,我是刑警寧澤柱宦,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布些椒,位于F島的核電站,受9級(jí)特大地震影響掸刊,放射性物質(zhì)發(fā)生泄漏免糕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望说墨。 院中可真熱鬧,春花似錦苍柏、人聲如沸尼斧。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)棺棵。三九已至,卻和暖如春熄捍,著一層夾襖步出監(jiān)牢的瞬間烛恤,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工余耽, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留缚柏,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓碟贾,卻偏偏與公主長(zhǎng)得像币喧,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子袱耽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

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