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