基于HTML5與CSS3的網(wǎng)頁設(shè)計技術(shù)研究

　　摘要：針對計算機(jī)屏幕設(shè)計的網(wǎng)站在其他尺寸的設(shè)備上的顯示效果大打折扣的問題，提出了一種基于HTML5和CSS3的響應(yīng)式網(wǎng)頁設(shè)計，它可以跟據(jù)用戶使用設(shè)備的屏幕分辨率、尺寸、情境和行為等調(diào)整頁面布局，使不同設(shè)備上的頁面顯示效果更加合理、流暢，給用戶帶來優(yōu)質(zhì)的體驗。實驗表明，響應(yīng)式網(wǎng)頁設(shè)計能夠自適應(yīng)不同設(shè)備，提供更好的顯示效果。

　　關(guān)鍵詞：響應(yīng)式網(wǎng)頁;網(wǎng)頁設(shè)計;頁面優(yōu)化

　　趙怡姍; 范明鈺成都信息工程大學(xué)學(xué)報2021-12-13

　　0引言

　　隨著移動互聯(lián)逐漸成熟，人們享受著它帶來的隨時、隨地、隨身和互聯(lián)網(wǎng)開放、分享、互動的便利。由于需要兼容不同移動終端，若只采取傳統(tǒng)pc網(wǎng)頁設(shè)計，將會存在以下問題：

　　第一，網(wǎng)頁界面不能完整且清晰地呈現(xiàn)在移動設(shè)備上，用戶需要不停縮小、放大頁面來進(jìn)行操作，用戶體驗不佳。

　　第二，網(wǎng)頁界面顯示混亂，會出現(xiàn)文字、圖片堆疊的情況，導(dǎo)致瀏覽網(wǎng)頁困難。

　　第三，用戶操作多樣化，觸摸式響應(yīng)、橫豎屏切換、縮放網(wǎng)頁中字體的大小等將導(dǎo)致傳統(tǒng)網(wǎng)頁不能正常呈現(xiàn)。

　　目前解決方法是為每一款不同的設(shè)備單獨編寫代碼，但這將導(dǎo)致程序開發(fā)成本大大增加。

　　針對以上問題，提出的解決方法是采用響應(yīng)式Web設(shè)計，其核心思想是基于HTML5、CSS3等技術(shù)，使設(shè)計出的網(wǎng)頁具有跨平臺性和自適應(yīng)性，能夠在不同的Web瀏覽器或不同參數(shù)的顯示器上自動調(diào)整自身布局，使得網(wǎng)站界面能夠在移動手機(jī)端、iPad平板電腦和桌面電腦各類設(shè)備上呈現(xiàn)出一致的效果[1]。采用響應(yīng)式布局，對于投資者而言，降低了資金投人與維護(hù)成本;對于開發(fā)者而言，減少了煩瑣的重復(fù)開發(fā)次數(shù);對于用戶而言，在各個Web客戶端均可以看到布局一致的內(nèi)容界面，增強(qiáng)了用戶體驗感[2]。

　　在移動行業(yè)的快速發(fā)展，移動設(shè)備大量涌人市場的背景下，研究基于HTML5和CSS3的響應(yīng)式Web的設(shè)計與實現(xiàn)具有很大的研究意義和應(yīng)用價值。

　　為了解決傳統(tǒng)PC網(wǎng)頁設(shè)計無法兼容不同移動終端的問題，可以針對不同移動端(如I0S、安卓、黑莓等)分別開發(fā)客戶端，但這需要單獨探測每一臺移動終端的屏幕尺寸、分辨率，會造成過多的人力和物力的浪費，沒有從根本上解決問題。美國的用戶體驗設(shè)計師EthanMarcotte提出基于響應(yīng)式的Web設(shè)計理論，是設(shè)計一套系統(tǒng)界面，滿足不同終端設(shè)備(包括PC機(jī)、平板電腦及智能手機(jī)等)對數(shù)據(jù)展示操作需求，而顯示不發(fā)生異樣[3]。這種設(shè)計理念，較好地解決了傳統(tǒng)網(wǎng)頁開發(fā)模式只能在單一類設(shè)備或固定某幾類瀏覽器上的使用局限性，從根本上使網(wǎng)頁具有跨平臺、自適應(yīng)等特性。從而使網(wǎng)站管理者可以以較低的成本開發(fā)、維護(hù)和升級網(wǎng)站;開發(fā)者可以以一套編碼設(shè)計實現(xiàn)網(wǎng)站內(nèi)容，降低了開發(fā)人力，也減少了后期運維成本;用戶在不同客戶端設(shè)備無差別地瀏覽網(wǎng)頁，增強(qiáng)了用戶體驗感，使用戶能夠方便快捷地進(jìn)行辦公等行為。

　　響應(yīng)式設(shè)計采用的技術(shù)手段主要有3種，分別為流動布局、媒體查詢技術(shù)和彈性圖片[4]。其基本原理為：一切彈性化，即將網(wǎng)頁上出現(xiàn)的圖片、文本的固定尺寸與像素轉(zhuǎn)變?yōu)榘凑赵O(shè)備尺寸進(jìn)行計算后的百分比數(shù)據(jù)，使圖片和文本的相對大小可以自由變動，增強(qiáng)網(wǎng)頁自動調(diào)整的彈性。在程序設(shè)計者開發(fā)時，可以選取已包裝好的框架，快速實現(xiàn)網(wǎng)頁的彈性化，以提高開發(fā)效率。GitHub網(wǎng)站上提供的免費框架有Bootstrap、Foundation、Skeleton、LessFramework、Frameless、Wireiy等，這些框架可以幫助程序員減少代碼工作量、摒去冗余的代碼。這些框架的廣泛應(yīng)用，大大推動了響應(yīng)式Web的開發(fā)和應(yīng)用。

　　1響應(yīng)式網(wǎng)頁核心技術(shù)1.1響應(yīng)式網(wǎng)頁

　　響應(yīng)式網(wǎng)頁是指能夠兼容不同終端，自行識別設(shè)備屏幕尺寸并做相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。若只使用傳統(tǒng)PC網(wǎng)頁，當(dāng)被接人移動端設(shè)備時往往不宜閱讀，用戶需要滑動、縮放頁面進(jìn)行查看，同時由于頁面被縮放，許多網(wǎng)頁上的按鈕將不能正常使用，導(dǎo)致用戶體驗感極差。而響應(yīng)式網(wǎng)頁可以自動進(jìn)行頁面調(diào)整以達(dá)到更好的用戶體驗。現(xiàn)在響應(yīng)式網(wǎng)頁設(shè)計技術(shù)正在逐漸成熟，許多網(wǎng)站都采用響應(yīng)式網(wǎng)頁以達(dá)到吸引用戶的目的。對于如今智能產(chǎn)品飛速發(fā)展的時代來說，響應(yīng)式網(wǎng)頁符合其發(fā)展方向。甚至在未來，會有更多的智能設(shè)備出現(xiàn)，如何提高網(wǎng)站自適應(yīng)性是很好的課題。現(xiàn)在的技術(shù)人員通過使用HTML5和CSS3來實現(xiàn)響應(yīng)式Web技術(shù)，包括：彈性(流動)布局、彈性圖片和媒體查詢技術(shù)，通過此方式設(shè)計的網(wǎng)頁界面具有彈性，能夠調(diào)整網(wǎng)頁布局、圖片尺寸和分辨率以適應(yīng)不同尺寸的顯示屏幕。其中，HTML5是超文本標(biāo)記語言的第五次重大修改。與以前的版本相比，CSS3在圖像背景、布局樣式、視覺元素等方面具有顯著的特點m。

　　1.2響應(yīng)式關(guān)鍵技術(shù)

　　主要的關(guān)鍵技術(shù)如下：

　　(1)媒體查詢。由媒體類型和一個或多個檢測媒體特性的條件表達(dá)式組成，可用于檢測的媒體特性有width、height和coloi■等。媒體查詢可以針對不同大小的設(shè)備終端，自動檢測系統(tǒng)尺寸、屏幕大小、屏幕定向等，選擇不同的CSS樣式。使用媒體查詢，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。

　　(2)彈性(流動)布局。該方式使各層塊的位置具有浮動特性[5]，設(shè)計人員將網(wǎng)頁寬度、圖片、文字等元素的大小用百分比表示，而不是用固定的數(shù)字。這樣可以在顯示頁面大小變化時，隨之做出改變以適應(yīng)不同的網(wǎng)頁布局。

　　(3)彈性圖片。默認(rèn)情況下，圖像的顯示尺寸是以width和height屬性值來定義。屬性值一旦固定，無論網(wǎng)頁界面如何變化，圖像只會按原始尺寸顯示。若設(shè)置為彈性圖片，只需將圖像的max-width屬性設(shè)置為百分?jǐn)?shù)，就可以讓圖像隨著彈性網(wǎng)格自動縮放。如果圖片的寬度超過顯示器的寬度，就自動縮小，而不會撐破顯示器;反之就按原始尺寸顯示[6]。

　　利用媒體查詢技術(shù)可以得知不同硬件設(shè)備顯示器的尺寸大小，使整個網(wǎng)頁布局具有自適應(yīng)性，可以動態(tài)地調(diào)整比例變化。網(wǎng)頁可以應(yīng)用在不同的硬件顯示器上，完美地呈現(xiàn)給不同設(shè)備的用戶，使用戶體驗感強(qiáng)烈[7]。但是單一地通過此技術(shù)，并不能完全展示理想化的效果。如果當(dāng)窗口的大小在一定范圍內(nèi)變化時，變化的過程會變得很生硬，沒有任何效果展示。同時窗口尺寸大于預(yù)先設(shè)定的媒體查詢的寬度時，網(wǎng)頁的展示不能在一個屏幕范圍內(nèi)完全展示，需要通過滑動鼠標(biāo)等動作來完成全部的瀏覽，用戶體驗感就會很差[8]。因此需要靈活地設(shè)計網(wǎng)頁屬性，引人彈性化屬性，將固定尺寸的內(nèi)容轉(zhuǎn)變成百分比展示形式，通過流動布局使所有的窗口展示做到平滑過渡，提高用戶的體驗感m〇

　　同時，彈性圖片使圖片具有彈性化性質(zhì)，并隨著彈性布局響應(yīng)的改變而改變[1°]。例如在在

　　中不需要設(shè)置圖片的高度寬度，否則將會固定圖片尺寸，影響實現(xiàn)的效果。同樣方式如用在標(biāo)簽video，object中，也會使這些元素具有自適應(yīng)顯示器大小的特性，達(dá)到根據(jù)顯示器尺寸自動改變自身大小的效果，從而自適應(yīng)匹配顯示器[11]。但媒體查詢、流動布局、彈性圖片這些響應(yīng)式關(guān)鍵技術(shù)，還需要通過標(biāo)記語言和層疊樣式表這兩種計算機(jī)語言去實現(xiàn)。

　　1.3響應(yīng)式網(wǎng)頁使用的計算機(jī)語言

　　響應(yīng)式網(wǎng)頁使用的計算機(jī)語言是超文本標(biāo)記語言HTML5和層疊樣式表CSS3。超文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用，它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分。層疊樣式表是一種用來表現(xiàn)HTML5的計算機(jī)語言。CSS3為HTML5標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。

　　1.3.1超文本標(biāo)記語言HTML5

　　HTML5是一種建立網(wǎng)頁文件的語言，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容，如：文字如何處理，畫面如何安排，圖片如何顯示等。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫出錯的標(biāo)記將不指出其錯誤，且不停止執(zhí)行過程。HTML5定義了網(wǎng)頁內(nèi)容的含義和結(jié)構(gòu)，簡單來說就是把網(wǎng)頁分割成一個一個的矩形，然后把這些矩形嵌套起來，形成層級關(guān)系，讓同一張網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整布局。

　　1.3.2層疊樣式表CSS3

　　CSS3是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，被用于描述網(wǎng)頁上的信息格式化和顯示方式。它可以把網(wǎng)頁本身的主題內(nèi)容和網(wǎng)頁設(shè)計的格式進(jìn)行有效的分開，即CSS3樣式的信息作為獨立的一個文件存放，以便設(shè)計者對網(wǎng)頁文檔進(jìn)行有效集中的統(tǒng)一管理。網(wǎng)頁設(shè)計中，CSS3樣式文件建立后是一個獨立的文件，可以被其他HTML5文件共享使用，這樣設(shè)計者就不用對網(wǎng)頁中的文件格式進(jìn)行反復(fù)的操作設(shè)計，把主要精力和時間放在網(wǎng)頁主要內(nèi)容和功能上，大大減少了不必要的設(shè)計工作和時間。

　　另外利用CSS3可以靈活地使用響應(yīng)式設(shè)計模式實現(xiàn)移動互聯(lián)網(wǎng)站點[12]。如果終端設(shè)備的系統(tǒng)或者瀏覽器版本支持，利用CSS3可以實現(xiàn)如下功能：

　　(1)根據(jù)硬件顯示器尺寸自適應(yīng)地調(diào)整圖片規(guī)格;(2)根據(jù)硬件顯示器尺寸自適應(yīng)地調(diào)整頁面布局;(3)根據(jù)硬件顯示器尺寸隱藏一些非必要模塊。

　　HTML5和CSS3為響應(yīng)式網(wǎng)頁提供了技術(shù)支撐，實現(xiàn)了兼容不同終端，自行識別設(shè)備屏幕尺寸并做出相應(yīng)調(diào)整。但在實際應(yīng)用中，除了優(yōu)秀的兼容性和流暢的自動調(diào)整功能，網(wǎng)頁的視覺效果、輔助功能同樣是吸引用戶的一大亮點。

　　2響應(yīng)式網(wǎng)頁設(shè)計技術(shù)在移動端的應(yīng)用及優(yōu)化

　　由于移動設(shè)備的普及，越來越多的人使用移動設(shè)備查看網(wǎng)頁，因此響應(yīng)式網(wǎng)頁設(shè)計在移動端上的應(yīng)用越來越受到重視。但目前在移動端的應(yīng)用上存在以下幾個問題：網(wǎng)頁的過度裝飾化導(dǎo)致在移動端的網(wǎng)頁加載速度變慢;網(wǎng)頁信息量逐漸變大，導(dǎo)致信息查找變得更加困難;人們使用移動端網(wǎng)頁更加頻繁，這使得人們對于網(wǎng)頁的體驗感有更高的要求。所以，響應(yīng)式網(wǎng)頁設(shè)計技術(shù)在移動端的應(yīng)用中需要進(jìn)行視覺優(yōu)化和響應(yīng)式導(dǎo)航優(yōu)化來解決以上問題。

　　2.1視覺優(yōu)化

　　視覺優(yōu)化主要分為網(wǎng)頁整體界面設(shè)計效果優(yōu)化和細(xì)節(jié)優(yōu)化。網(wǎng)頁整體界面設(shè)計效果優(yōu)化是改變曾經(jīng)過于繁復(fù)、具體化的設(shè)計風(fēng)格，采用更簡潔的設(shè)計方法，這種更加抽象式的設(shè)計風(fēng)格被稱為扁平化設(shè)計。細(xì)節(jié)優(yōu)化則包括很多方面，例如添加動畫效果等，提高網(wǎng)頁的趣味性。

　　2.1.1扁平化設(shè)計

　　扁平化是對擬物化設(shè)計的一種變革，不同于擬物化像素級的細(xì)致刻畫和繁復(fù)多樣的效果設(shè)計，扁平化對圖形進(jìn)行抽象、簡化和平面化處理，省略掉了所有仿真元素，在處理不同區(qū)域、顯示網(wǎng)頁重點上傾向于大膽使用色彩的碰撞。擬物化通常仔細(xì)刻畫存在于現(xiàn)實世界中的物體，在屏幕上最大限度地呈現(xiàn)其物理特性和質(zhì)感，提供逼真的視覺體驗感，這樣的設(shè)計會給瀏覽者留下深刻的印象。但在移動端應(yīng)用上，擬物化這種較為細(xì)致繁復(fù)的設(shè)計方法無法在小屏幕上展現(xiàn)其優(yōu)勢，因為擬物化界面往往以某種主流設(shè)備屏幕尺寸為標(biāo)準(zhǔn)，只能在這種尺寸的屏幕上完美展示它的設(shè)計效果。這樣設(shè)計出來的網(wǎng)頁界面無法適應(yīng)所有設(shè)備，當(dāng)在小尺寸設(shè)備上顯示時，其缺陷就一覽無余，不僅使界面雜亂不堪，還會使網(wǎng)頁加載速度減慢。扁平化設(shè)計回歸網(wǎng)頁的本質(zhì)，是為了讓使用者關(guān)注信息本身，而不是界面的裝飾美等輔助因素。采用扁平化設(shè)計是目前移動端網(wǎng)頁設(shè)計的必然趨勢，并不能僅僅歸因于為了迎合這種迅速風(fēng)靡的設(shè)計潮流，而是扁平化恰恰能高效地配合響應(yīng)式設(shè)計，適應(yīng)于不同分辨率下的顯示，與響應(yīng)式的設(shè)計有著天然的兼容性。

　　2.1.2添加動畫效果

　　雖然扁平化設(shè)計秉承簡潔的設(shè)計理念，但不意味著網(wǎng)頁設(shè)計粗糖簡單。如果界面設(shè)計不注重細(xì)節(jié)，用戶就感受不到它的品質(zhì)，無法得到用戶群體的青睞。而添加一些動畫效果，不僅有利于提升網(wǎng)頁的視覺效果，提高網(wǎng)頁品質(zhì)，而且可以消解用戶在使用中產(chǎn)生的一些負(fù)面情緒。例如，容易被忽略的加載動畫，等待和加載幾乎是網(wǎng)頁跳轉(zhuǎn)過程中必然存在的過程。它起到承前啟后的作用，富有趣味性的動畫效果可將令人生厭的等待過程轉(zhuǎn)化為令用戶愉悅的細(xì)節(jié)體驗，是強(qiáng)化用戶第一印象的重要組件。

　　2.2響應(yīng)式導(dǎo)航優(yōu)化

　　導(dǎo)航是網(wǎng)站的核心功能之一，導(dǎo)航設(shè)計的成功與否，直接關(guān)系到用戶體驗是否良好[13]。在信息繁復(fù)多樣的網(wǎng)站里，如果網(wǎng)絡(luò)頁面雜亂導(dǎo)致用戶無法快速找到想要的信息，那么這個網(wǎng)頁設(shè)計必然是失敗的。而導(dǎo)航能將信息統(tǒng)一并歸類，使頁面看起來整潔有序。例如，將寬屏網(wǎng)頁轉(zhuǎn)化到小屏設(shè)備上時，導(dǎo)航將對多余的信息進(jìn)行歸納，形成狹長的導(dǎo)航條。因此研究導(dǎo)航對于網(wǎng)頁設(shè)計的美觀和實用性具有重要的意義。

　　2.2.1非響應(yīng)式導(dǎo)航的缺陷

　　傳統(tǒng)非相應(yīng)式網(wǎng)頁設(shè)計采用固定布局，而針對移動設(shè)備設(shè)計的移動端網(wǎng)頁采用流式布局，導(dǎo)致非相應(yīng)式導(dǎo)航無法在移動端上正常使用，常導(dǎo)致的問題有：(1)占據(jù)過大空間。傳統(tǒng)網(wǎng)頁導(dǎo)航為了使用方便，一般會使用面積較大的導(dǎo)航，而在移動端顯示時，導(dǎo)航的面積過大會擠壓、覆蓋網(wǎng)頁內(nèi)容，并且當(dāng)頁面被等比例縮小后，選項會顯示不清或者不完整，嚴(yán)重影響用戶使用體驗。(2)無法調(diào)整布局。響應(yīng)式導(dǎo)航可根據(jù)頁面大小調(diào)整自身大小和布局，例如在較小屏幕上顯示時，導(dǎo)航可自行折行顯示，調(diào)整選項大小以達(dá)到最佳的效果，但傳統(tǒng)網(wǎng)頁導(dǎo)航只能按照一種方式顯示，不能適應(yīng)移動端的屏幕變化。

　　2.2.2常見響應(yīng)式導(dǎo)航

　　非響應(yīng)式導(dǎo)航的缺陷限制了它在移動端上的應(yīng)用，網(wǎng)頁設(shè)計者越來越青睞響應(yīng)式導(dǎo)航。而導(dǎo)航設(shè)計也并非只是考慮其實用性，在網(wǎng)頁設(shè)計上，保證導(dǎo)航功能性的同時，也需要考慮導(dǎo)航占據(jù)屏幕空間是否過大，是否符合大多數(shù)人使用習(xí)慣等問題。通過學(xué)習(xí)國內(nèi)外響應(yīng)式網(wǎng)站的導(dǎo)航系統(tǒng)，列出多種常見響應(yīng)式導(dǎo)航：

　　(1)頂部導(dǎo)航頂部導(dǎo)航一直是各大網(wǎng)站常用的導(dǎo)航欄設(shè)計，其設(shè)計特點是將所有導(dǎo)航項平鋪在網(wǎng)頁頂部。這類導(dǎo)航簡潔明了，不會隱藏在初始狀態(tài)下的網(wǎng)頁中，可以讓用戶迅速尋找到所需信息。頂部導(dǎo)航這樣的設(shè)計形式保守但目的性強(qiáng)，可以確保組織結(jié)構(gòu)的可靠和降低用戶尋找的時間成本，也無需依賴JavaScript，保證了導(dǎo)航本身的兼容性，不必打破原有的CSS樣式[14]。但這類導(dǎo)航的缺點在于當(dāng)導(dǎo)航項較多時，網(wǎng)頁美觀性將大大降低，另外在小屏設(shè)備上，既占據(jù)過大的面積，也容易誤觸。

　　(2)側(cè)滑導(dǎo)航側(cè)滑導(dǎo)航又稱抽屜導(dǎo)航，在不需要時隱藏在可視范圍之外，通過觸發(fā)特定按鈕，導(dǎo)航項從屏幕側(cè)邊滑出。這種隱藏式導(dǎo)航欄可以節(jié)省較大的網(wǎng)頁空間，使界面較為簡潔，而滑動的特效也會為網(wǎng)頁增添色彩。但在小屏設(shè)備上，這種滑動式的頁面設(shè)計不一定能完美展現(xiàn)其優(yōu)勢。寬度大的側(cè)邊欄在窄小的屏幕上會出現(xiàn)文字堆疊、顯示錯位等問題。另外對于一部分用戶而言，側(cè)滑式導(dǎo)航不是那么直觀，特別是用戶對導(dǎo)航結(jié)構(gòu)不清楚的情況下，很難找到觸發(fā)按鈕。

　　(3)底部導(dǎo)航底部導(dǎo)航是一種不太常用的導(dǎo)航設(shè)計，其位于一個頁面的底部。采用這種導(dǎo)航系統(tǒng)的網(wǎng)頁更加側(cè)重于快速給予用戶信息，將一些不重要的信息整理成導(dǎo)航置于網(wǎng)頁底部。部分網(wǎng)頁在設(shè)計底部導(dǎo)航時加人了錨點連接技術(shù)，用戶可點擊指定按鈕，直達(dá)網(wǎng)頁底部使用導(dǎo)航。底部導(dǎo)航的優(yōu)勢在于用戶可優(yōu)先瀏覽網(wǎng)頁內(nèi)容，對于結(jié)構(gòu)、內(nèi)容較為簡單的網(wǎng)頁來說較為適宜。

　　(4)滾動式導(dǎo)航滾動式導(dǎo)航分為水平滾動和垂直滾動。水平滾動在小屏設(shè)備上較為常見，由于屏幕較窄，當(dāng)導(dǎo)航項較多時，水平滾動可避免折行顯示，大大提高網(wǎng)頁美觀性。而垂直滾動更適宜電腦端網(wǎng)頁，當(dāng)使用鼠標(biāo)滾輪滾動的時候，網(wǎng)頁的滾動特效不會讓用戶產(chǎn)生交互上的錯位感，反而形成一種新的視覺效果。

　　(5)懸浮按鈕導(dǎo)航懸浮按鈕導(dǎo)航是一種始終保持在頁面最上層的小型觸發(fā)式導(dǎo)航，通常在小屏設(shè)備上使用。其優(yōu)勢在于用戶可改變懸浮按鈕在頁面上的位置以防止按鈕遮擋內(nèi)容，且懸浮式按鈕導(dǎo)航不隨頁面滾動而移動，方便用戶隨時使用。

　　3結(jié)束語

　　主要介紹了響應(yīng)式網(wǎng)頁的核心技術(shù)和響應(yīng)式網(wǎng)頁設(shè)計技術(shù)在移動端的應(yīng)用及優(yōu)化。隨著軟硬件方面的不斷發(fā)展，響應(yīng)式網(wǎng)頁的需求會不斷增大。但目前，國內(nèi)還缺乏優(yōu)秀且完整的響應(yīng)式網(wǎng)頁設(shè)計，例如，etao的首頁和新浪網(wǎng)的頻道首頁雖然采用了響應(yīng)式設(shè)計，但也只限于部分模塊，并沒有實現(xiàn)整個網(wǎng)站的響應(yīng)式設(shè)計。國內(nèi)缺乏響應(yīng)式網(wǎng)頁設(shè)計的主要原因有兩點：[1]響應(yīng)式雖然是一種很好的方案，但并不是萬能的。對于一些以展示為主、交互較少的網(wǎng)站，響應(yīng)式確實是一種不錯的解決方案。但對于一些信息量較大、交互較為復(fù)雜的網(wǎng)站(例如各類大型電商、門戶、后臺管理系統(tǒng)等)，響應(yīng)式未必是最合適的解決方案。(2)由于國內(nèi)用戶使用的版本不高，響應(yīng)式網(wǎng)頁需要適配多種多樣的瀏覽器、技術(shù)成本較高，這是阻擋響應(yīng)式網(wǎng)站發(fā)展的一個重要問題.

　　響應(yīng)式是一種非常好的設(shè)計思路，為Web的跨設(shè)備兼容提供了一種高度可用的可能性。如果能解決技術(shù)門檻的問題，響應(yīng)式建站一定會成為未來企業(yè)官網(wǎng)的主流。目前一些響應(yīng)式云建站系統(tǒng)在積極地解決這些技術(shù)問題，也期待響應(yīng)式網(wǎng)頁未來能被市場接納，得到廣泛的應(yīng)用。