基于HTML5進(jìn)行響應(yīng)式Web應(yīng)用的技巧

劉于沛

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

【關(guān)鍵詞】 HTML5 響應(yīng)式Web 設(shè)計(jì)

前言

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

一、HTML5概述

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

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

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

二、基于HTML5的響應(yīng)式Web設(shè)計(jì)

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

2.1 viewport指令設(shè)置

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

2.2頁面寬度與字體設(shè)置

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

2.3 CSS執(zhí)行

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

三、結(jié)語

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

參 考 文 獻(xiàn)

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

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

[3]張坤.響應(yīng)式設(shè)計(jì)分析及其與web應(yīng)用程序的對(duì)比研究[J].攀枝花學(xué)院學(xué)報(bào)，2016，33（2）：29-31.