咸宁诰谇保险股份有限公司

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