企業(yè)做網(wǎng)站自適應(yīng)網(wǎng)頁設(shè)計技術(shù)

發(fā)布：2019-03-08 13:52:49 瀏覽：5121

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

自適應(yīng)網(wǎng)頁設(shè)計所涉關(guān)鍵技術(shù)

1、媒體查詢技術(shù)

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

2、流動布局技術(shù)

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

3、HTML5技術(shù)

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

4、CSS3技術(shù)

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

2自適應(yīng)網(wǎng)頁設(shè)計技術(shù)開發(fā)應(yīng)用

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

本地視頻自適應(yīng)網(wǎng)頁設(shè)計方法

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

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

2遠程視頻自適應(yīng)網(wǎng)頁設(shè)計方法

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

(2)、用流動布局技術(shù)實現(xiàn)遠程視頻自適應(yīng):為保證遠程視頻能夠自適應(yīng)移動終端等屏幕的寬度,可以先用<div>標(biāo)簽將<iframe>包裝起來,并定義合適的樣式;同時指定60%填充底部;然后用100%寬度、100%高度、絕對位置指定子元素的尺寸,以使被嵌入的元素可以自動擴展到最大寬度。具體代碼有CSS3代碼和HTML5代碼兩部分;其中CSS3代碼部分主要用來控制遠程視頻的載入及寬高比等,而HTML5代碼部分主要控制視頻顯示分辨率及負責(zé)視頻地址的連接。

CSS3主要基于不同視頻文件的寬高比例有所不同而設(shè)計使用,對于標(biāo)準(zhǔn)視頻文件,其寬高比4∶3,而對于寬屏模式,其寬高比為16∶9。而對于上述HTML5代碼中,寬高像素比是640∶480,即是我們所說的寬高比4∶3,那么相應(yīng)CSS3中padding-bottom的值應(yīng)為75%;如果當(dāng)視頻寬高比是16∶9時,相應(yīng)CSS3中padding-bottom的值則需要修改為56.25%;再就是需要根據(jù)所要顯示視頻文件像素大小來修改HTML5代碼中<iframe>內(nèi)視頻文件的寬度、高度等屬性。