企業做網站自適應網頁設計技術

發布：2019-03-08 13:52:49 瀏覽：5072

伴隨我國互聯網技術的快速發展與應用,特別移動互聯網技術和智能終端的應用,一度催生了我國數量規模龐大的移動互聯網用戶,移動終端以其便于攜帶、操作簡便成為人們上網瀏覽信息、觀看視頻等的最主要設備;相比傳統網站、網頁在桌面式電腦上的顯示,傳統網站、網頁在移動智能終端上的顯示卻出現了一些新的問題,其中一個最主要的問題就是由于移動智能終端設備種類的繁多、屏幕分辨率多的樣化及操作系統各異等原因,導致傳統網站、網頁內容無法做到在移動智能終端設備上的正常完美顯示,即傳統網站、網頁內容無法完全適應移動終端屏幕尺寸問題。鑒于上述問題的存在,美國著名的網頁設計工程師EthanMarcotte提出了“自適應網頁設計”技術,旨在從傳統網站、網頁設計的優化角度解決網站、網頁不能很好適應移動終端顯示問題;該設計技術的主要理念是通過集中創建網站、網頁等相關頁面的圖片大小、排版布局等,達到可以智能的依據用戶行為和使用設備環境自動調整相應布局。

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

1、媒體查詢技術

所謂媒體查詢主要是是指通過不同的元素類型、條件定義樣式表的規則,之所以這樣做,是因為這樣可以使CSS3更加精準的作用于同一元素的不同條件及不同類型的元素,從而達到在不修改任何頁面內容前提下直接、正常顯示在不同操作系統類型及尺寸的移動終端屏幕上。

2、流動布局技術

流動布局是通過智能使用Div、數學計算和百分比創建的,主要利用相對尺寸及結合百分比等功能,再通過簡單分割尋找到與移動終端屏幕相適應的寬度,能夠保證設計的網頁適應不同操作系統類型、不同分辨率及屏幕尺寸的移動終端。該技術還一個優點就是有很好的跨瀏覽器兼容性,而一旦出現問題也很容易修復。

3、HTML5技術

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

4、CSS3技術

CSS又稱層疊樣式表,層疊樣式表技術能夠精確、有效控制網頁頁面的布局、字體、顏色和背景等;CSS3是CSS層疊樣式表技術的升級版本,模塊化是升級后該技術的主要特點;基于模塊化的應用能夠有效提高網頁頁面性能、降低網頁文件大小,以及提升網頁加載速度,最重要的是能夠自行調整網頁布局、尺寸,以適應移動終端顯示所需。

2自適應網頁設計技術開發應用

人們使用移動終端上網,除了閱讀文字、圖片信息外,一個重要應用就是觀看視頻;而在網頁中視頻顯示較文字、圖片顯示更復雜,相應視頻自適應實現起來也更復雜,加之本地視頻和遠程視頻在自適應實現上也不盡相同;我們可以說,如果實現了視頻自適應,那么其他文字、圖片等頁面元素的自適應也就不成為問題。

本地視頻自適應網頁設計方法

(1)、媒體查詢技術實現方法:可以使用在本地視頻文件上添加媒體查詢規則的方法實現,當移動終端設備中的視頻與添加的媒體查詢規則相匹配時立即加載相應視頻。

(2)、流動布局技術實現方法:除了上述媒體查詢技術方法,還可以通過用CSS指定視頻文件流媒體尺寸方法實現。

2遠程視頻自適應網頁設計方法

(1)、用FitVids插件實現遠程視頻自適應:網頁中的遠程視頻自適應可以借助于一個名為FitVids插件實現。

(2)、用流動布局技術實現遠程視頻自適應:為保證遠程視頻能夠自適應移動終端等屏幕的寬度,可以先用<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%;再就是需要根據所要顯示視頻文件像素大小來修改HTML5代碼中<iframe>內視頻文件的寬度、高度等屬性。