基于HTML5與CSS3的網頁設計技術研究

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

　　關鍵詞：響應式網頁;網頁設計;頁面優化

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

　　0引言

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

　　第一，網頁界面不能完整且清晰地呈現在移動設備上，用戶需要不停縮小、放大頁面來進行操作，用戶體驗不佳。

　　第二，網頁界面顯示混亂，會出現文字、圖片堆疊的情況，導致瀏覽網頁困難。

　　第三，用戶操作多樣化，觸摸式響應、橫豎屏切換、縮放網頁中字體的大小等將導致傳統網頁不能正常呈現。

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

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

　　在移動行業的快速發展，移動設備大量涌人市場的背景下，研究基于HTML5和CSS3的響應式Web的設計與實現具有很大的研究意義和應用價值。

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

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

　　1響應式網頁核心技術1.1響應式網頁

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

　　1.2響應式關鍵技術

　　主要的關鍵技術如下：

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

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

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

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

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

　　

 

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

　　1.3響應式網頁使用的計算機語言

　　響應式網頁使用的計算機語言是超文本標記語言HTML5和層疊樣式表CSS3。超文本標記語言是標準通用標記語言下的一個應用，它通過標記符號來標記要顯示的網頁中的各個部分。層疊樣式表是一種用來表現HTML5的計算機語言。CSS3為HTML5標記語言提供了一種樣式描述，定義了其中元素的顯示方式。

　　1.3.1超文本標記語言HTML5

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

　　1.3.2層疊樣式表CSS3

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

　　另外利用CSS3可以靈活地使用響應式設計模式實現移動互聯網站點[12]。如果終端設備的系統或者瀏覽器版本支持，利用CSS3可以實現如下功能：

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

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

　　2響應式網頁設計技術在移動端的應用及優化

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

　　2.1視覺優化

　　視覺優化主要分為網頁整體界面設計效果優化和細節優化。網頁整體界面設計效果優化是改變曾經過于繁復、具體化的設計風格，采用更簡潔的設計方法，這種更加抽象式的設計風格被稱為扁平化設計。細節優化則包括很多方面，例如添加動畫效果等，提高網頁的趣味性。

　　2.1.1扁平化設計

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

　　2.1.2添加動畫效果

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

　　2.2響應式導航優化

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

　　2.2.1非響應式導航的缺陷

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

　　2.2.2常見響應式導航

　　非響應式導航的缺陷限制了它在移動端上的應用，網頁設計者越來越青睞響應式導航。而導航設計也并非只是考慮其實用性，在網頁設計上，保證導航功能性的同時，也需要考慮導航占據屏幕空間是否過大，是否符合大多數人使用習慣等問題。通過學習國內外響應式網站的導航系統，列出多種常見響應式導航：

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

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

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

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

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

　　3結束語

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

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