響(xiang)應(ying)式(shi)設(she)(she)(she)計(ji)是(shi)當(dang)前的主流(liu)(liu)趨勢，是(shi)網頁(ye)設(she)(she)(she)計(ji)領域中十分重要(yao)、甚(shen)至是(shi)不(bu)可或缺的組成部分。在(zai)歐美國家，大部分的企(qi)業都(dou)已經建(jian)立了響(xiang)應(ying)式(shi)網站(zhan)，據悉，世界500強中歐美國家已經有一半的企(qi)業完(wan)成了響(xiang)應(ying)式(shi)建(jian)站(zhan)，而國內(nei)市場也緊(jin)跟潮流(liu)(liu)，越(yue)來越(yue)多的企(qi)業在(zai)選擇建(jian)站(zhan)時也優先(xian)會考慮響(xiang)應(ying)式(shi)網頁(ye)設(she)(she)(she)計(ji)方案(an)。

那到底(di)什么是(shi)響應(ying)(ying)式(shi)呢？響應(ying)(ying)式(shi)為(wei)web的跨(kua)設備(bei)(bei)兼容提供了(le)一種可能(neng)性，即無論在哪種設備(bei)(bei)端(duan)，不管是(shi)PC電腦、平板，還是(shi)手(shou)機移(yi)動，網(wang)頁(ye)都能(neng)根(gen)據使用設備(bei)(bei)屏幕的大小自動調整對網(wang)頁(ye)內容進(jin)行合適排版排版。

在眾多響應式設(she)計作品中，也有(you)一些需要注意的地方，下面就案例具體說明。

1.隱藏導(dao)航欄(lan)

不管是(shi)(shi)首(shou)頁還是(shi)(shi)其他欄(lan)目，在(zai)輪播(bo)幻燈片的(de)時候盡量隱(yin)藏導航(hang)欄(lan)，因(yin)為在(zai)電腦端可(ke)能不覺得(de)有(you)什么，但(dan)在(zai)移(yi)動端上查看(kan)的(de)時候，還是(shi)(shi)隱(yin)藏起(qi)來比較好(hao)，最(zui)好(hao)是(shi)(shi)在(zai)鼠標(biao)光(guang)標(biao)移(yi)動上去之后再顯示，這樣(yang)能避免內容和導航(hang)之間的(de)沖突(tu)或者(zhe)混亂(luan)感。

案例：益民醫療器材網(wang)站模板（響應式網(wang)頁(ye)）

2.減少圖片與視頻混淆

事實上如果圖(tu)片視(shi)頻(pin)(pin)設(she)計合理(li)，不同類(lei)型(xing)的(de)媒體混到一(yi)(yi)起也(ye)沒有(you)關系(xi)，但(dan)還是(shi)盡量(liang)減少這(zhe)種搭配為(wei)好。站(zhan)在用戶角度(du)去(qu)看，在查(cha)看圖(tu)片時，突然下一(yi)(yi)張變成了(le)視(shi)頻(pin)(pin)，突然的(de)聲音(yin)和額外(wai)的(de)流量(liang)消耗相比也(ye)不是(shi)他們(men)愿(yuan)意接(jie)受(shou)的(de)。分(fen)類(lei)進行展示會給用戶整潔的(de)感覺，也(ye)有(you)心理(li)準備料想下面的(de)內容。

案(an)例(li)2：廣告設(she)計商城(cheng)模板(ban)（響應式(shi)網頁）

3.避免圖(tu)片標題

標題(ti)最(zui)好(hao)用文(wen)字來體現。如果是圖(tu)片(pian)或者其他附加文(wen)字，在(zai)移動端(duan)可能會與圖(tu)片(pian)重疊，影(ying)響(xiang)顯(xian)示(shi)效(xiao)果。另(ling)外，如果使用圖(tu)片(pian)則要思考(kao)如何斷句、排版，在(zai)不同使用端(duan)顯(xian)示(shi)效(xiao)果如何等這些問題(ti)，而單純文(wen)字格局會更容(rong)易設置。

案例3：裝修(xiu)設(she)計行業網(wang)站（響(xiang)應式(shi)網(wang)頁）

4.確保圖片顯(xian)示尺寸不(bu)要超過(guo)原始(shi)圖片

當圖(tu)(tu)片放大時(shi)(shi)，可能會出現像素化的失(shi)真效果，因(yin)此在放圖(tu)(tu)片的時(shi)(shi)候(hou)需(xu)要十分(fen)注意尺寸，盡量縮小而不是(shi)放大。因(yin)為(wei)在移(yi)動端還好，在PC端上(shang)，最大也不能超(chao)過本身(shen)寬度。說起來(lai)簡單，但很多響(xiang)(xiang)應式頁面，在拉(la)寬瀏覽(lan)器界面的時(shi)(shi)候(hou)，會有圖(tu)(tu)片超(chao)出本身(shen)尺寸顯(xian)示，十分(fen)影響(xiang)(xiang)網站效果。

案例4：化工(gong)工(gong)業網(wang)(wang)站模板(ban)（響應(ying)式網(wang)(wang)頁(ye)）

不(bu)管是響(xiang)應(ying)式網(wang)頁(ye)設(she)計(ji)，還是選(xuan)擇模板建站(zhan)，當我(wo)們從圖片(pian)庫選(xuan)取圖片(pian)進(jin)行(xing)響(xiang)應(ying)式設(she)計(ji)的(de)時候，會發現(xian)有很多細碎(sui)的(de)問(wen)題開(kai)始出(chu)現(xian)，稍不(bu)注意就會在意想不(bu)到(dao)(dao)的(de)地方影響(xiang)到(dao)(dao)整個(ge)設(she)計(ji)和體(ti)驗(yan)。因此(ci)盡(jin)量(liang)以用(yong)戶為(wei)中(zhong)心，會讓(rang)響(xiang)應(ying)式網(wang)頁(ye)設(she)計(ji)更優(you)秀，也讓(rang)做出(chu)來的(de)網(wang)站(zhan)效果更佳。

查看更多優秀響應式網頁：//szjicheng.cn/design/moban/index.html