自适應網頁設計技術及其應用(use)-滄州星達網絡科技有限公司

伴随我(I)國(country)互聯網技術的(of)快速發展與應用(use)，特别移動互聯網技術和(and)智能終端的(of)應用(use)，一(one)度催生(born)了(Got it)我(I)國(country)數量規模龐大(big)的(of)移動互聯網用(use)戶，移動終端以(by)其便于(At)攜帶、操作(do)簡便成爲(for)人(people)們(them)上(superior)網浏覽信息、觀看視頻等的(of)最主要(want)設備；相比傳統網站、網頁在(exist)桌面式電腦上(superior)的(of)顯示，傳統網站、網頁在(exist)移動智能終端上(superior)的(of)顯示卻出(out)現了(Got it)一(one)些新的(of)問題，其中一(one)個(indivual)最主要(want)的(of)問題就是(yes)由于(At)移動智能終端設備種類的(of)繁多、屏幕分辨率多的(of)樣化及操作(do)系統各異等原因，導緻傳統網站、網頁内容無法做到(arrive)在(exist)移動智能終端設備上(superior)的(of)正常完美顯示，即傳統網站、網頁内容無法完全适應移動終端屏幕尺寸問題。鑒于(At)上(superior)述問題的(of)存在(exist)，美國(country)著名的(of)網頁設計工程師EthanMarcotte提出(out)了(Got it)“自适應網頁設計”（ResponsiveWebDesign，RWD）技術，旨在(exist)從傳統網站、網頁設計的(of)優化角度解決網站、網頁不(No)能很好适應移動終端顯示問題；該設計技術的(of)主要(want)理念是(yes)通過集中創建網站、網頁等相關頁面的(of)圖片大(big)小、排版布局等，達到(arrive)可以(by)智能的(of)依據用(use)戶行爲(for)和(and)使用(use)設備環境（如：操作(do)系統類型、屏幕尺寸和(and)屏幕定向等）自動調整相應布局。爲(for)了(Got it)更好促進“自适應網頁設計”技術在(exist)傳統網站、網頁優化設計中的(of)科學應用(use)，以(by)更快取得令人(people)滿意的(of)網頁優化設計效果，筆者結合工作(do)實際，在(exist)總結闡釋自适應網頁設計關鍵技術基礎上(superior)，以(by)網頁中的(of)“視頻自适應”實現爲(for)例，探讨了(Got it)自适應網頁設計技術及其應用(use)問題。

1自适應網頁設計所涉關鍵技術

1.1媒體查詢技術

所謂媒體查詢主要(want)是(yes)是(yes)指通過不(No)同的(of)元素類型、條件定義樣式表的(of)規則，之所以(by)這(this)樣做，是(yes)因爲(for)這(this)樣可以(by)使CSS3更加精準的(of)作(do)用(use)于(At)同一(one)元素的(of)不(No)同條件及不(No)同類型的(of)元素，從而達到(arrive)在(exist)不(No)修改任何頁面内容前提下直接、正常顯示在(exist)不(No)同操作(do)系統類型及尺寸的(of)移動終端屏幕上(superior)。

1.2流動布局技術

流動布局是(yes)通過智能使用(use)Div、數學計算和(and)百分比創建的(of)，該理念由EthanMarcotte提出(out)，主要(want)利用(use)相對尺寸及結合百分比等功能，再通過簡單分割尋找到(arrive)與移動終端屏幕相适應的(of)寬度，能夠保證設計的(of)網頁适應不(No)同操作(do)系統類型、不(No)同分辨率及屏幕尺寸的(of)移動終端。該技術還一(one)個(indivual)優點就是(yes)有很好的(of)跨浏覽器兼容性，而一(one)旦出(out)現問題也很容易修複。

1.3HTML5技術

HTML5技術有萬維網核心語言之稱，是(yes)超文本标記語言HTML第五次修改而成；HTML5具有簡易性、支持視音頻、代碼清晰，以(by)及存儲靈活、人(people)機交互性好等優點；對于(At)HTML5的(of)技術優勢更多體現在(exist)專門針對移動設備網頁的(of)設計開發上(superior)，甚至可以(by)在(exist)網頁上(superior)直接修改、調試

1.4CSS3技術

CSS又稱層疊樣式表，層疊樣式表技術能夠精确、有效控制網頁頁面的(of)布局、字體、顔色和(and)背景等；CSS3是(yes)CSS層疊樣式表技術的(of)升級版本，模塊化是(yes)升級後該技術的(of)主要(want)特點；基于(At)模塊化的(of)應用(use)能夠有效提高網頁頁面性能、降低網頁文件大(big)小，以(by)及提升網頁加載速度，最重要(want)的(of)是(yes)能夠自行調整網頁布局、尺寸，以(by)适應移動終端顯示所需。

自适應網頁設計技術及其應用(use)

2自适應網頁設計技術開發應用(use)

人(people)們(them)使用(use)移動終端上(superior)網，除了(Got it)閱讀文字、圖片信息外，一(one)個(indivual)重要(want)應用(use)就是(yes)觀看視頻；而在(exist)網頁中視頻顯示較文字、圖片顯示更複雜，相應視頻自适應實現起來(Come)也更複雜，加之本地(land)視頻和(and)遠程視頻在(exist)自适應實現上(superior)也不(No)盡相同；我(I)們(them)可以(by)說，如果實現了(Got it)視頻自适應，那麽其他(he)文字、圖片等頁面元素的(of)自适應也就不(No)成爲(for)問題。下面，筆者就結合實踐經驗就網頁中的(of)“視頻自适應”問題進行深入探讨。

2.1本地(land)視頻自适應網頁設計方法

（1）媒體查詢技術實現方法：可以(by)使用(use)在(exist)本地(land)視頻文件上(superior)添加媒體查詢規則的(of)方法實現，當移動終端設備中的(of)視頻與添加的(of)媒體查詢規則相匹配時(hour)立即加載相應視頻。以(by)移動終端本地(land)視頻static/file/A-big.html和(and)static/file/A-big.html爲(for)例，具體代碼如下：

<videoc ontrols>
<source src="static/file/A-big.html" type="video/mp4" media="all and（max-width:720px）">
<source src="static/file/A-big.html" type="video/mp4">
</video>

（2）流動布局技術實現方法：除了(Got it)上(superior)述媒體查詢技術方法，還可以(by)通過用(use)CSS指定視頻文件流媒體尺寸方法實現；具體代碼如下：

<video controls preload="none">
<source src="static/file/A-big.html" type="video/mp4">
</video>

這(this)裏的(of)preload="none"是(yes)指不(No)提前加載視頻文件。此外，還可以(by)HTML5配合CSS實現視頻自适應播入，即使用(use)HTML5中的(of)video元素和(and)max-width屬性。

2.2遠程視頻自适應網頁設計方法

（1）用(use)FitVids插件實現遠程視頻自适應：網頁中的(of)遠程視頻自适應可以(by)借助于(At)一(one)個(indivual)名爲(for)FitVids插件實現。首先需要(want)引入一(one)個(indivual)jQuery庫，并将其放置在(exist)<head>标簽中；對于(At)FitVids可從地(land)址爲(for)http://fitvidsjs.com/的(of)網站下載，并将下載的(of)fitvids.js引入到(arrive)當前頁面<head>标簽中；最後再用(use)jQuery指向包含特定視頻的(of)元素。

（2）用(use)流動布局技術實現遠程視頻自适應：爲(for)保證遠程視頻能夠自适應移動終端等屏幕的(of)寬度，可以(by)先用(use)<div>标簽将<iframe>包裝起來(Come)，并定義合适的(of)樣式；同時(hour)指定60%填充底部；然後用(use)100%寬度、100%高度、絕對位置指定子元素的(of)尺寸，以(by)使被嵌入的(of)元素可以(by)自動擴展到(arrive)最大(big)寬度。具體代碼有CSS3代碼和(and)HTML5代碼兩部分；其中CSS3代碼部分主要(want)用(use)來(Come)控制遠程視頻的(of)載入及寬高比等，而HTML5代碼部分主要(want)控制視頻顯示分辨率及負責視頻地(land)址的(of)連接；以(by)優酷網中網址爲(for)static/file/A-big1.html的(of)“static/file/A-big.html”視頻爲(for)例，具體HTML5代碼如下：

<div class="video-container">
<iframe src="static/file/A-big1.html" width="640" height="480" frameborder="0"></iframe>
</div>

CSS3主要(want)基于(At)不(No)同視頻文件的(of)寬高比例有所不(No)同而設計使用(use)，對于(At)标準視頻文件，其寬高比4∶3，而對于(At)寬屏模式，其寬高比爲(for)16∶9。而對于(At)上(superior)述HTML5代碼中，寬高像素比是(yes)640∶480，即是(yes)我(I)們(them)所說的(of)寬高比4∶3，那麽相應CSS3中padding-bottom的(of)值應爲(for)75%；如果當視頻寬高比是(yes)16∶9時(hour)，相應CSS3中padding-bottom的(of)值則需要(want)修改爲(for)56.25%；再就是(yes)需要(want)根據所要(want)顯示視頻文件像素大(big)小來(Come)修改HTML5代碼中<iframe>内視頻文件的(of)寬度、高度等屬性。

分享建站技術、優化技巧、營銷資訊

 技術信息

自适應網頁設計技術及其應用(use)