基于HTML5進行響應式Web應用的技巧

劉于沛

【摘要】 相比較以往的版本，HTML5具有許多新的特性，其已經(jīng)成為了一種主流的Web前端開發(fā)技術。本文結合HTML5的概念和特性，對基于HTML5的響應式Web設計進行了討論和分析。

【關鍵詞】 HTML5 響應式Web 設計

前言

移動互聯(lián)網(wǎng)的出現(xiàn)，對于Web系統(tǒng)提出了許多新的要求，響應式Web也因此受到了越來越多的關注，其頁面布局可以根據(jù)用戶終端顯示設備的差異，進行自動調(diào)整，從而實現(xiàn)對于所有尺寸屏幕的兼容，而且可以通過一次開發(fā)，實現(xiàn)PC版、觸屏版以及手機版的相互融合。基于HTML5，做好響應式Web的頁面設計，是相關技術人員需要關注的重點問題。

一、HTML5概述

HTML的指超文本標記語言，全稱Hyper Text Mark-up Language，是萬維網(wǎng)的基礎描述語言，我們平時上網(wǎng)時瀏覽的各種網(wǎng)頁，基本上都是基于HTML設計制作的。HTML5是對于HTML語言的第五次修訂，也是現(xiàn)階段的最新版本。事實上，HTML5并非單純的指HTML技術，還包括了CSS、JavaScript腳本語言等。

HTML5的出現(xiàn)，主要是為了滿足移動設備對于多媒體技術的一個應用需求，canvas、video等標記的應用都能夠?qū)崿F(xiàn)上述目標。同時，在HTML5中，用戶與文檔的交互方式發(fā)生了巨大的改變，首先，新解析規(guī)則的應用，進一步強化了HTML5的靈活性，拓展了其適用范圍；其次，新增加了一些屬性，對冗余屬性和過時屬性進行了淘汰；然后，支持不同文檔之間的拖放功能以及離線編輯功能，而且具備更加詳細的解析規(guī)則。

對于終端用戶，HTML5豐富的功能和應用減少了對于各種插件的依賴性，可以更好的滿足用戶的各種需求，如聽音樂、看電影、玩游戲等，同時其對于各類設備的兼容性較強，可以直接將麥克風、攝像頭等與影音軟件進行對接，還支持手機端的跨應用切換功能，用戶可以直接在不同的APP之間進行切換，而不需要返回桌面，便捷性更強。對于開發(fā)人員而言，HTML5對語法進行了重新定義，實現(xiàn)了PC端與移動設別的統(tǒng)一標準，結合數(shù)量巨大的開源庫，使得Web程序的開發(fā)設計變得更加簡單，開發(fā)出的程序也可以實現(xiàn)全平臺兼容，成本有了很大的降低。另外，HTML5所提供的實時更新功能，為Bug的處理提供了便利。

二、基于HTML5的響應式Web設計

移動互聯(lián)網(wǎng)和智能手機、平板電腦等的發(fā)展和普及，使得許多人習慣在移動設備上進行工作和學習，在這種情況下，如何實現(xiàn)頁面大小的自動調(diào)整，適應不同尺寸屏幕的需求，就成為設計人員需要重點關注和解決的問題。就目前而言，部分網(wǎng)站針對不同的終端設備，制作出了不同的網(wǎng)頁版本，可以滿足用戶的個性化需求，但是這樣不僅成本較高，而且運行維護異常繁瑣。對此，可以采用響應式Web，或者說自適應Web，通過對現(xiàn)有開發(fā)技巧的整合，對頁面布局問題進行解決。

2.1 viewport指令設置

viewport指令存在于meta標簽中，該標簽是HTML文檔中head部分的標簽，可以將其中的name屬性值設置為viewport，其實際上是手機瀏覽器顯示的頁面區(qū)域，默認大于瀏覽器本身的可視區(qū)域，在這種情況下，如果網(wǎng)頁在手機中顯示，會出現(xiàn)橫向滾動條，影響操作。對此，在設計環(huán)節(jié)，可以將viewport指令的寬度調(diào)整為設備本身的屏幕寬度，不允許手動縮放，就能夠保證頁面的正常顯示。

2.2頁面寬度與字體設置

網(wǎng)頁必須能夠自動進行布局的調(diào)整，因此，頁面寬度以及字體必須設計為相對數(shù)值，而是應該采用相對數(shù)值或者自動值。以字體設置為例，應該采用相對值rem，將HTML根元素作為參照值，通過對HTML根元素的合理設計，字體可以自動依照設定好的比例進行調(diào)整。例如，在網(wǎng)頁中，默認的字體大小為16px，有1rem=16px，通過相應的代碼設計，可以將字體大小調(diào)整為14px，以適應小屏幕的顯示需求。

2.3 CSS執(zhí)行

在CSS3中，引入了一種全新的方法，即媒體查詢，其能夠根據(jù)不同的媒體設備，選擇不同的CSS樣式，自動執(zhí)行。因此，基于HTML5，如果想要根據(jù)不同的屏幕寬度執(zhí)行不同的CSS文件，則可以利用Link標簽或者@media的方式進行引入。

三、結語

與以往的版本相比，HTML5具有更加豐富的功能和更加顯著的優(yōu)勢，基于HTML5進行響應式Web的設計，可以滿足不同終端設備對于網(wǎng)頁顯示的不同要求，為人們的工作和生活提供便利。相關技術人員應該認識到HTML5在移動互聯(lián)網(wǎng)時代的發(fā)展前景，做好進一步的研究工作。

參 考 文 獻

[1]蔣凌燕，查英華.基于HTML5 的響應式 Web頁面重組適配技術研究[J].計算機與現(xiàn)代化，2015，（2）：7-10.

[2]臺雯.HTML5在WEB前端開發(fā)中的應用研究[J].天津職業(yè)院校聯(lián)合學報，2016，18（8）：70-73.

[3]張坤.響應式設計分析及其與web應用程序的對比研究[J].攀枝花學院學報，2016，33（2）：29-31.