響應(yīng)式網(wǎng)頁設(shè)計策略探討

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了響應(yīng)式網(wǎng)頁設(shè)計策略探討范文，希望能給你帶來靈感和參考，敬請閱讀。

【摘要】隨著移動互聯(lián)網(wǎng)的不斷完善和智能終端設(shè)備的普及，智能手機(jī)和平板電腦逐漸成為主流上網(wǎng)工具。媒體設(shè)備的多樣性使得傳統(tǒng)PC端網(wǎng)頁無法為移動端用戶提供良好的用戶體驗(yàn)。本文分析了移動傳播的優(yōu)勢，研究了響應(yīng)式網(wǎng)頁的內(nèi)涵和主流技術(shù)，并對響應(yīng)式網(wǎng)頁設(shè)計策略進(jìn)行了詳細(xì)分析。

【關(guān)鍵詞】響應(yīng)式網(wǎng)頁；移動優(yōu)先策略；媒體查詢；流式布局

1引言

互聯(lián)網(wǎng)的迅速、便捷、高普及性使之成為各行各業(yè)進(jìn)行宣傳營銷的主要手段。隨著移動互聯(lián)網(wǎng)的不斷完善和智能終端設(shè)備的普及，移動設(shè)備正被人們越來越廣泛地應(yīng)用，并成為訪問互聯(lián)網(wǎng)的主流終端設(shè)備。移動傳播具有攜帶方便、時空自由、響應(yīng)即時等優(yōu)勢，為企業(yè)宣傳與營銷、文化傳承與保護(hù)注入新的活力。傳統(tǒng)的PC端網(wǎng)頁無法為移動端用戶提供良好的用戶體驗(yàn)。能自適應(yīng)不同分辨率的電腦、平板和手機(jī)等設(shè)備，給多種用戶帶來更好的視覺體驗(yàn)的網(wǎng)頁，更有利于擴(kuò)展傳播范圍、拓寬營銷渠道，響應(yīng)式網(wǎng)頁應(yīng)運(yùn)而生。

2響應(yīng)式網(wǎng)頁的內(nèi)涵

響應(yīng)式網(wǎng)頁秉承“一次設(shè)計，普遍適用”原則，即一個網(wǎng)站能夠兼容多個終端。網(wǎng)頁的內(nèi)容和布局根據(jù)用戶行為（縮放瀏覽器、切換移動端設(shè)備橫屏與豎屏）以及終端設(shè)備屏幕的尺寸、分辨率等，進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。用戶使用各種品牌和版本的手機(jī)、各種分辨率的電腦還是iPad打開網(wǎng)頁時，網(wǎng)頁的界面都能夠展示合適的布局、圖片尺寸、顯示內(nèi)容等，提供最優(yōu)化的顯示效果[1]。這種能夠自適應(yīng)各種屏幕分辨率，自動轉(zhuǎn)換網(wǎng)頁界面布局和內(nèi)容呈現(xiàn)的網(wǎng)頁叫做響應(yīng)式網(wǎng)頁。

3響應(yīng)式網(wǎng)頁主流技術(shù)

媒體查詢是響應(yīng)式網(wǎng)頁開發(fā)的核心技術(shù)。從手機(jī)到平板電腦再到電腦，終端設(shè)備分辨率的種類不勝枚舉。使用@media查詢，可以檢測設(shè)備的實(shí)際寬度、手持方向、媒體特性等屬性，對不同媒體屬性的設(shè)備定義不同的CSS樣式。不同種類的終端加載網(wǎng)頁時或重置瀏覽器大小的過程中，頁面會根據(jù)媒體類型或?yàn)g覽器的寬度，加載不同的CSS樣式，重新渲染頁面，顯示不同的內(nèi)容和布局效果。流式布局是響應(yīng)式設(shè)計的一種常規(guī)布局思想，它以百分比為單位。頁面元素能夠在分辨率或?yàn)g覽器寬度發(fā)生變化時，平滑縮放，避免給用戶帶來視覺上的跳躍感；同時避免出現(xiàn)傳統(tǒng)固定布局中的橫向滾動條。流式布局也存在一些缺陷，當(dāng)屏幕在較小和較大尺寸之間變化時，同樣的布局設(shè)計不能提供良好的視覺體驗(yàn)。如一些文字的行寬在電腦端顯示時，符合用戶的視覺效果，但是在手機(jī)端就會顯得太窄，影響用戶瀏覽。百分比為單位的元素大小以其父元素寬度為參照物，元素嵌套層數(shù)較多時，計算機(jī)比較麻煩。流動布局還需結(jié)合媒體查詢的方法，針對不同分辨率的設(shè)備來優(yōu)化網(wǎng)頁樣式的響應(yīng)式策略，這樣才能達(dá)到更好的效果。彈性布局主要使用em和rem作為元素單位，rem以HTML根元素大小為參照物進(jìn)行計算，解決了百分比計算上的缺陷，使網(wǎng)頁設(shè)計更加便捷高效。單純的rem不能實(shí)現(xiàn)響應(yīng)式布局，還需要結(jié)合javascript或媒體查詢技術(shù)來實(shí)現(xiàn)。同時，rem作為字體大小單位，結(jié)合媒體查詢技術(shù)可以方便地控制不同設(shè)備上文字的字號。彈性圖片技術(shù)可以實(shí)現(xiàn)圖片隨著屏幕大小的變化進(jìn)行平滑過渡，適配縮放，實(shí)現(xiàn)響應(yīng)式變化。同時，準(zhǔn)備大分辨率和小分辨率兩種圖像設(shè)計方案，結(jié)合媒體查詢技術(shù)，在大分辨率設(shè)備上使用大分辨率圖像，在小分辨率設(shè)備上使用小分辨率圖像，即大屏加載大圖，小屏加載小圖。便于提高網(wǎng)頁加載速度，節(jié)省存儲空間[2]。Bootstrap框架是一個用于前端開發(fā)的開源工具包，是當(dāng)前響應(yīng)式Web設(shè)計最流行、最常用的框架。它基于HTML5、CSS3、jQuery和JavaScrip技術(shù)，為開發(fā)者提供了多種響應(yīng)式的組件，將一整套CSS樣式和特效代碼封裝在不同的文件中，方便用戶使用。

4響應(yīng)式網(wǎng)頁的設(shè)計策略

在進(jìn)行頁面布局設(shè)計時，媒體查詢有兩種方案。一是使用max-width，從大屏幕（桌面端）開始向下的設(shè)計方案，二是使用min-width，從小屏幕（移動端）開始向上的設(shè)計方案。第二種方案是移動優(yōu)先（Mobile-First）的設(shè)計策略，即優(yōu)先針對移動設(shè)備進(jìn)行內(nèi)容和布局設(shè)計，再逐漸添加內(nèi)容，增強(qiáng)大屏幕的視覺效果，適應(yīng)分辨率更大的設(shè)備。移動優(yōu)先策略可以減少很多不必要的CSS代碼，有利于提高響應(yīng)式網(wǎng)頁的開發(fā)效率，更好的滿足用戶需求。響應(yīng)式網(wǎng)頁一般使用媒體查詢技術(shù)，設(shè)置小屏、中屏、大屏三種布局方案。運(yùn)用移動優(yōu)先策略，首先設(shè)計小屏幕三字型布局。小屏幕的顯示空間有限，在進(jìn)行設(shè)計時要去粗取精，對內(nèi)容進(jìn)行提煉，突出主要內(nèi)容；對形式進(jìn)行簡化，使導(dǎo)航進(jìn)行折貼、縮小banner等。中屏幕布局中導(dǎo)航可以展開，banner可以適量放大，內(nèi)容區(qū)出現(xiàn)川字型和骨骼型布局。大屏布局在中屏布局基礎(chǔ)上，使側(cè)邊欄內(nèi)容呈“display:block”顯示狀態(tài)，適當(dāng)增加網(wǎng)站內(nèi)容，突出網(wǎng)站特點(diǎn)，增強(qiáng)網(wǎng)站表現(xiàn)效果，彌補(bǔ)小屏幕的視覺局限性；為瀏覽者提供新的視覺元素、豐富的頁面內(nèi)容?？梢姡憫?yīng)式的設(shè)計策略可以提供多樣化的布局，使網(wǎng)頁在不同終端設(shè)備上都能提供良好的用戶體驗(yàn)和視覺效果，充分發(fā)揮移動互聯(lián)網(wǎng)渠道廣泛、覆蓋率高、使用便捷等優(yōu)勢。移動優(yōu)先策略能夠避免移動終端加載過多的資源，無須將PC端樣式重新繪制，PC端表現(xiàn)效果也不會受到影響[2]。響應(yīng)式設(shè)計為實(shí)現(xiàn)網(wǎng)站移動化提供了一種新的設(shè)計策略和選擇，隨著響應(yīng)式設(shè)計技術(shù)的不斷發(fā)展與完善，其受到關(guān)注與應(yīng)用也將會越來越多[3]。

【參考文獻(xiàn)】

[1]彭雪萍.試析響應(yīng)式網(wǎng)頁的設(shè)計與開發(fā)[J].電腦編程技巧與維護(hù)，2018（10）:8-10.

[2]李倩.面向不同設(shè)備的響應(yīng)式網(wǎng)頁設(shè)計探析[J].教育教學(xué)論壇，2017（12）:82-83.

[3]郭彥輝.響應(yīng)式Web設(shè)計的研究與實(shí)現(xiàn)[J].軟件，2018，39（01）:169-172.

作者：劉巧麗 陳潔彬 賈春柳 單位：衡水學(xué)院