基于HTML5技術(shù)的響應(yīng)式Web設(shè)計(jì)淺析

中國(guó)東方電氣集團(tuán)有限公司 程榮贇

基于HTML5技術(shù)的響應(yīng)式Web設(shè)計(jì)淺析

中國(guó)東方電氣集團(tuán)有限公司 程榮贇

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，為適應(yīng)日益增長(zhǎng)的多元化終端設(shè)備瀏覽需求，使用戶在不同閱讀終端上都能有良好的使用感受，本文淺析了一種高效的解決方案：基于HTML5技術(shù)的響應(yīng)式Web設(shè)計(jì)。通過對(duì)媒體查詢、流體布局、彈性圖片等Web設(shè)計(jì)技術(shù)的組合和提升,實(shí)現(xiàn)任意閱讀終端對(duì)網(wǎng)頁(yè)布局及內(nèi)容都能良好地呈現(xiàn)，是未來(lái)Web設(shè)計(jì)技術(shù)發(fā)展的大勢(shì)所趨。

響應(yīng)式；HTML5；Web設(shè)計(jì)

0 引言

隨著IT信息技術(shù)和移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，移動(dòng)閱讀終端，如平板電腦、智能手機(jī)等越來(lái)越普及，且型號(hào)各異，而各類桌面計(jì)算機(jī)、電視屏幕規(guī)格也越來(lái)越多元化，主流設(shè)備的概念越來(lái)越被淡化。讓網(wǎng)站頁(yè)面盡量兼容各類設(shè)備，適應(yīng)各種分辨率的屏幕，確保良好的用戶體驗(yàn)，是Web前端開發(fā)工程師必須要解決的重要問題。響應(yīng)式Web設(shè)計(jì)因此應(yīng)運(yùn)而生，一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端都做一個(gè)特定的版本，就像具備自主辨識(shí)能力一樣，確保用戶無(wú)論在何種閱讀環(huán)境下，都能得到良好的體驗(yàn)感。

1 響應(yīng)式Web設(shè)計(jì)的概念

獨(dú)立Web設(shè)計(jì)師伊森·馬科特（Ethan Marcotte）在2010年首次提出了響應(yīng)式Web設(shè)計(jì)（Responsive Web Design）概念。他認(rèn)為，真正的響應(yīng)式Web設(shè)計(jì)方法不僅僅是簡(jiǎn)單的根據(jù)可視區(qū)域大小來(lái)改變網(wǎng)頁(yè)布局，而是要從整體上顛覆當(dāng)前的網(wǎng)頁(yè)設(shè)計(jì)方法，是針對(duì)任意閱讀終端的網(wǎng)頁(yè)內(nèi)容進(jìn)行完美布局的一種顯示機(jī)制。……