伴隨我國互聯(lián)網(wǎng)技術(shù)的快速發(fā)展與應用, 特別移動(dòng)互聯(lián)網(wǎng)技術(shù)和智能終端的應用, 一度催生了我國數量規模龐大的移動(dòng)互聯(lián)網(wǎng)用戶(hù), 移動(dòng)終端以其便于攜帶、操作簡(jiǎn)便成為人們上網(wǎng)瀏覽信息、觀(guān)看視頻等的最主要設備;相比傳統網(wǎng)站、網(wǎng)頁(yè)在桌面式電腦上的顯示, 傳統網(wǎng)站、網(wǎng)頁(yè)在移動(dòng)智能終端上的顯示卻出現了一些新的問(wèn)題, 其中一個(gè)最主要的問(wèn)題就是由于移動(dòng)智能終端設備種類(lèi)的繁多、屏幕分辨率多的樣化及操作系統各異等原因, 導致傳統網(wǎng)站、網(wǎng)頁(yè)內容無(wú)法做到在移動(dòng)智能終端設備上的正常完美顯示, 即傳統網(wǎng)站、網(wǎng)頁(yè)內容無(wú)法完全適應移動(dòng)終端屏幕尺寸問(wèn)題。鑒于上述問(wèn)題的存在, 美國著(zhù)名的網(wǎng)頁(yè)設計工程師Ethan Marcotte提出了“自適應網(wǎng)頁(yè)設計”技術(shù), 旨在從傳統網(wǎng)站、網(wǎng)頁(yè)設計的優(yōu)化角度解決網(wǎng)站、網(wǎng)頁(yè)不能很好適應移動(dòng)終端顯示問(wèn)題;該設計技術(shù)的主要理念是通過(guò)集中創(chuàng )建網(wǎng)站、網(wǎng)頁(yè)等相關(guān)頁(yè)面的圖片大小、排版布局等, 達到可以智能的依據用戶(hù)行為和使用設備環(huán)境自動(dòng)調整相應布局。
自適應網(wǎng)頁(yè)設計所涉關(guān)鍵技術(shù)
1、媒體查詢(xún)技術(shù)
所謂媒體查詢(xún)主要是是指通過(guò)不同的元素類(lèi)型、條件定義樣式表的規則, 之所以這樣做, 是因為這樣可以使CSS3更加精準的作用于同一元素的不同條件及不同類(lèi)型的元素, 從而達到在不修改任何頁(yè)面內容前提下直接、正常顯示在不同操作系統類(lèi)型及尺寸的移動(dòng)終端屏幕上。
2、流動(dòng)布局技術(shù)
流動(dòng)布局是通過(guò)智能使用Div、數學(xué)計算和百分比創(chuàng )建的, 主要利用相對尺寸及結合百分比等功能, 再通過(guò)簡(jiǎn)單分割尋找到與移動(dòng)終端屏幕相適應的寬度, 能夠保證設計的網(wǎng)頁(yè)適應不同操作系統類(lèi)型、不同分辨率及屏幕尺寸的移動(dòng)終端。該技術(shù)還一個(gè)優(yōu)點(diǎn)就是有很好的跨瀏覽器兼容性, 而一旦出現問(wèn)題也很容易修復。
3、HTML5技術(shù)
HTML5技術(shù)有萬(wàn)維網(wǎng)核心語(yǔ)言之稱(chēng), 是超文本標記語(yǔ)言HTML第五次修改而成;HTML5具有簡(jiǎn)易性、支持視音頻、代碼清晰, 以及存儲靈活、人機交互性好等優(yōu)點(diǎn);對于HTML5的技術(shù)優(yōu)勢更多體現在專(zhuān)門(mén)針對移動(dòng)設備網(wǎng)頁(yè)的設計開(kāi)發(fā)上, 甚至可以在網(wǎng)頁(yè)上直接修改、調試
4、 CSS3技術(shù)
CSS又稱(chēng)層疊樣式表, 層疊樣式表技術(shù)能夠精確、有效控制網(wǎng)頁(yè)頁(yè)面的布局、字體、顏色和背景等;CSS3是CSS層疊樣式表技術(shù)的升級版本, 模塊化是升級后該技術(shù)的主要特點(diǎn);基于模塊化的應用能夠有效提高網(wǎng)頁(yè)頁(yè)面性能、降低網(wǎng)頁(yè)文件大小, 以及提升網(wǎng)頁(yè)加載速度, 最重要的是能夠自行調整網(wǎng)頁(yè)布局、尺寸, 以適應移動(dòng)終端顯示所需。
2 自適應網(wǎng)頁(yè)設計技術(shù)開(kāi)發(fā)應用
人們使用移動(dòng)終端上網(wǎng), 除了閱讀文字、圖片信息外, 一個(gè)重要應用就是觀(guān)看視頻;而在網(wǎng)頁(yè)中視頻顯示較文字、圖片顯示更復雜, 相應視頻自適應實(shí)現起來(lái)也更復雜, 加之本地視頻和遠程視頻在自適應實(shí)現上也不盡相同;我們可以說(shuō), 如果實(shí)現了視頻自適應, 那么其他文字、圖片等頁(yè)面元素的自適應也就不成為問(wèn)題。
本地視頻自適應網(wǎng)頁(yè)設計方法
(1)、媒體查詢(xún)技術(shù)實(shí)現方法:可以使用在本地視頻文件上添加媒體查詢(xún)規則的方法實(shí)現, 當移動(dòng)終端設備中的視頻與添加的媒體查詢(xún)規則相匹配時(shí)立即加載相應視頻。
(2)、流動(dòng)布局技術(shù)實(shí)現方法:除了上述媒體查詢(xún)技術(shù)方法, 還可以通過(guò)用CSS指定視頻文件流媒體尺寸方法實(shí)現。
2 遠程視頻自適應網(wǎng)頁(yè)設計方法
(1) 、用Fit Vids插件實(shí)現遠程視頻自適應:網(wǎng)頁(yè)中的遠程視頻自適應可以借助于一個(gè)名為Fit Vids插件實(shí)現。
(2) 、用流動(dòng)布局技術(shù)實(shí)現遠程視頻自適應:為保證遠程視頻能夠自適應移動(dòng)終端等屏幕的寬度, 可以先用<div>標簽將<iframe>包裝起來(lái), 并定義合適的樣式;同時(shí)指定60%填充底部;然后用100%寬度、100%高度、絕對位置指定子元素的尺寸, 以使被嵌入的元素可以自動(dòng)擴展到最大寬度。具體代碼有CSS3代碼和HTML5代碼兩部分;其中CSS3代碼部分主要用來(lái)控制遠程視頻的載入及寬高比等, 而HTML5代碼部分主要控制視頻顯示分辨率及負責視頻地址的連接。
CSS3主要基于不同視頻文件的寬高比例有所不同而設計使用, 對于標準視頻文件, 其寬高比4∶3, 而對于寬屏模式, 其寬高比為16∶9。而對于上述HTML5代碼中, 寬高像素比是640∶480, 即是我們所說(shuō)的寬高比4∶3, 那么相應CSS3中padding-bottom的值應為75%;如果當視頻寬高比是16∶9時(shí), 相應CSS3中padding-bottom的值則需要修改為56.25%;再就是需要根據所要顯示視頻文件像素大小來(lái)修改HTML5代碼中<iframe>內視頻文件的寬度、高度等屬性。