如何在響應式網頁中安置和處理圖片及視頻

來源:互聯網
上載者:User

 

  響應式網頁設計,是一種正在流行的網頁開發思想,它是利用靈活可變的柵格系統,令網頁的顯示模式可以根據訪問裝置的螢幕尺寸規格而進行自適應。預計2015年的時候,移動端的使用者數量將會從目前的8億,增長到19億,而這也意味著目前我們為案頭瀏覽器而設計的網頁,將會在他們的手機和平板上呈現出非常糟糕的使用體驗。

  但是隨著實際應用狀況的改變,響應式網頁設計還是會出現一系列複雜的併發症。本文餘下的部分,就是詳細闡述如何在響應式網頁中安置和處理多媒體元素,諸如圖片和視頻,最終的目的是幫你做出一個靠譜的網站,能讓這些元素無縫地在各種手持功能上載入運行,提升使用者體驗。

  響應式網頁設計中的圖片處理

  先說說響應式圖片的處理方法。在響應式網頁設計中,圖片處理的問題或多或少地和傳統網頁中的導覽列設計有相似之處。隨著新的行動裝置的普及,更高像素密度的螢幕使得網頁的任何一個瑕疵都顯得無比明顯,因此,圖片處理的核心問題在於如何確保網站(尤其是圖片)的各個方面都能儘可能靈活,並且確保每個像素不會在高分屏下模糊。

  圖片顯示的問題

  首先,當網頁對裝置響應時,並不存特定的圖片發布標準。並且針對這一問題,有大量的可選方案供你選擇。不過,這個時候,問題出現了:3G模式下,在視網膜螢幕下的行動裝置上映像應該如何處理。在網速較差的情況下,圖片的尺寸大小是否應該自動最佳化(降低)?這就是所謂“美術設計”的問題。網站提供的圖片在不同螢幕的裝置上都能夠顯示,還是遠遠不夠的。小螢幕裝置的使用者可能完全看不清圖片的細節,那麼,就應該在“能正常顯示”的基礎上,為這塊小螢幕單獨裁剪一個版本,讓使用者看清細節。

  有人提出,開發人員應該將所有不同尺寸大小比例的圖片都預先上傳到網站頁面中,並且設定好CSS與媒體查詢功能,將過大或過小的圖片都隱藏起來,讓瀏覽器就下載像素完全符合的映像。然而,實際狀況並非如此,瀏覽器在載入CSS類之前,就已經將所有的相關圖片都下載下來,這使得網頁更加臃腫,載入時間更長。

  圖片問題可能的解決方案

  在繼續探討之前,先明確一點:讓每塊螢幕都完美顯示圖片的解決方案是不存在的。可是我們能夠不斷探索可行性更高的方案,儘可能地提高精度,以下是我們為響應式網頁的映像問題,找到的可能的解決方案:

  Bootstrap

  如果你開始設計一個響應式網站,但是對於如何操作毫無頭緒,那麼你應該試試BootStrap的CSS架構。藉助Bootstrap,你可以很容易達成目標。更重要的是,Bootstrap提供的樣式以及在基礎的HTML元素上擴充出的類,將會使得圖片的響應更容易實現。

  Focal Point

  Focal Point是一個架構,可以協助你“種植”圖片並且控制焦點。這項技術僅僅使用了CSS,開發人員僅僅需要向對應標籤中添加含有靶心圖表片的類就可以了。

  CSS Sprites

  如果載入時間是你需要考慮的首要因素的話(它應該是),那麼你可以選擇CSS 精靈,尤其當你需要適配帶有視網膜螢幕的裝置之時。當你為高解析度螢幕適配網頁的時候(比如蘋果的Retina螢幕),一般會添加更大尺寸的圖片資源,並且使用CSS中的Media Query來識別並適配尺寸。但是如此一來,檔案數量和大小會急劇增加,並且會增加代碼中的CSS選取器的數量,引用更多的檔案。

如果使用CSS 精靈的話,這種情況會得以改善。你可以將網頁所需要的圖片都包含到一張大圖中供選取器來引用。僅僅需要一個http請求,你就可以將多個圖片素材擷取到本地。通過 <img />標籤引用的照片類素材並不適宜於用CSS精靈來處理,但是你在header和footer中使用的表徵圖素材和按鈕樣式之類的東西會在CSS精靈的加持下,好用很多。

  自適應部落格

  自適應圖片的解決方案可以通過檢測裝置的螢幕尺寸,為html嵌入符合螢幕尺寸需求的圖片資源。這種方案是一個典型的伺服器端解決方案,它需要在被本地運行Javascript來檢測,但它最主要還是依靠Apache2 網路伺服器,PHP 5.x以及GD庫。

  自適應圖片的方案最贊的地方在於你不需要改變標記。有人認為基於標記的解決方案是最好的,但是事實並非如此。對於Wordpress這樣的內容管理系統,自適應圖片的解決方案與之結合起來會方便很多。

  如果想讓你的網站能圖片自適應,那麼你需要在伺服器端修改或者增加.htaccess檔案。此外,你還需要在你的網站伺服器的根目錄下增加一個PHP檔案,並且在網站頁面中增加JavaScript代碼。當你做好這一切之後,PHP指令碼會擷取對於圖片的任何需求,並且會根據需求所指定的斷點調整好尺寸輸出網頁。

  在Wordpress網站中輸出響應式圖片的外掛程式

  在Wordpress網站中,還有其他通過外掛程式來實現響應式圖片的解決方案。以下外掛程式與  <picture> 標籤的作用相同:

  -PB Responsive Image

  -WP Responsive Image

  -Simple Responsive Image

  -Picture Fill WP

  此外,網上還有很多響應式的Wordpress主題可供使用者選擇。

  處理圖片的終極方案?

  再強調一次,請千萬記住,所有的這些處理圖片的可行性方案都有其局限性。比如自適應圖片的方案,它需要Apache和PHP的結合,因此它用於內容管理還好,但是不大可能完美適配於網站平台或者主機伺服器上。此外,自適應圖片有賴於伺服器通過.htaccess檔案擷取圖片尺寸的需求,這也就意味著,擷取的圖片不在自己的伺服器上,.htaccess中的指令碼就無能為力了。此外,這個指令碼還無法檢測頻寬,如果你拿著3G版iPad Air訪問這類網站的話,載入速度可能會慘不忍睹。最重要的是,它並沒有解決上述的“美術設計”的問題,它僅僅只是調整了原有圖片的尺寸而已。所以,對於這一切,你需要通過實驗找出最合適的方案。

  響應式網頁設計中的視頻處理

  毫無疑問,對於網站而言視頻是極其重要的營銷工具。因此,對於富有彈性的響應式視頻的需求越來越多。

  就像圖片一樣,讓圖片靈活地適配網頁也是個頭疼的事情。這並不關乎視頻播放器的尺寸,但即使是播放按鈕這樣的的基礎網頁元素,也都需要針對千奇百怪的裝置來適配和最佳化。以下提供幾個解決方案:

  為Wordpress中的視頻最佳化

  雖然wordpress提供了諸多響應式的主題,但是一般情況下,這些內嵌視頻並不會根據螢幕尺寸自行適配。這也是為何它們所在的網頁可能會出現展開,或者不對稱的情況。FitVids這一外掛程式完美的解決了這個問題。這是一個jQuery外掛程式,它能讓視頻針對螢幕尺寸自行適配。啟用外掛程式之後,Wordpress會在發布視頻內容時,向CSS選取器中自動添加“.post”類。儲存修改,你可以嘗試在不同尺寸的裝置中觀察網頁的布局,感受視頻播放的體驗,看看它是怎麼工作的。

  此外,還有更多可選的Wordpress外掛程式:

  -Fluid Video Embeds

  -Video Overlayer

  -MarcTV Video Embed

  -Responsive Video

  從其他網站中手動嵌入視頻

  YouTube以及其他類似的視頻託管網站通常以像素為單位固定寬度和高度,並且嵌入到代碼中。對於普通網站,這並沒有什麼不妥,但是對於響應式網頁,這樣的視頻是不合用的。這些使用了內建頁框和對象標籤的視頻網站代碼,用HTML5的視頻元素來處理是不可能的。簡單的說,HTML5的標籤搞不定來自Youtube和Vimeo的嵌入視頻。

  這個時候,CSS再次派上了用場。具體來說,即使容器元素按比例縮小,你可又可以保持視頻的內在比例。這種技術可以協助你講youtube、Vimeo和SlideShare等流媒體網站的視頻嵌入到網頁中並自然地顯示。你所要做的,是使用<div>容器來內嵌程式碼,並指定子項目的絕對位置,這會使得嵌入的視頻根據螢幕寬度自動擴充。

  值得注意的是,剝離出視頻並且按照尺寸比例封裝到Div的過程並不簡單,此外,這項技術對於多視頻的網站可行性並不高。不過如果你的網站已經設計成響應式的頁面,那麼這項技術將會在你的網站上完美運行。

  案例

  接下來是一些實際案例,這些響應式網站針對不同瀏覽器和螢幕最佳化了圖片和視頻:

  案例1:BootStrap+jQuery

  這是一個風格極簡的部落格/作品集網站,它使用了Bootstrap v2.2.2和jQuery。前者讓這個網站可以使用大量的表單、模態、提示、按鈕、轉盤並且響應式輸出,加入jQuery之後網站的流布局能力又得以提升。jQuery可以讓網站實現各種不同的顯示方式(比如在案頭端瀏覽器上顯示三欄,在平板上顯示一欄,在手機螢幕上顯示一欄)。

  案例2:FitVids

  這是一個在Wordpress架構中通過FitVids來嵌入視頻的案例。使用這一外掛程式的好處在於安裝方便,並且會讓視頻完美適配螢幕。

  案例3:Focal Point

  這一案例使用Focal point 來調整背景圖片並且突出人物照片。因此,這個案例中的網頁設計師並沒有提供一系列不同尺寸的圖片,他們僅僅只是改變了網站的視覺重心,將焦點移動到最大的物體上。

  案例4:自適應圖片

  最後這個案例使用了自適應圖片的方案。開發人員使用一個.htaccess檔案,一個PHP檔案,以及一行簡單的Javascript代碼.前兩個檔案可以放在伺服器根目錄下,而這行Javascript代碼則需要插入index檔案的檔案頭中。想搞清楚這些案例,你就應該訪問他們的網站。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。