名詞解釋
響應(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)皂岔。
根據(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)式電腦使用者多。
不僅僅在中國(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/
而天貓則沒(méi)有使用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) https://www.tmall.com/
通過(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)以及自我思考衬廷。