16
Sep.13

自適應網頁 Responsive web design 原理介紹

回上一頁
隨著行動上網的普及,越來越多的人使用手機上網。
行動裝置的使用率以及黏著度正在超越桌上設備,成為我們日常生活中最常接觸的3C用品。於是網頁設計產業面對了一個難題,如何才能在不同大小的行動設備上,完美的呈現網頁的內容呢?

手機的螢幕比較小,目前最大的Note解析度是在640px,而ipad則是在980左右,電腦寬螢幕尺寸是1920。同樣的內容要在大小迥異的螢幕上都呈現出好的效果,並不是一件容易達成的任務。

有一派的解決方式是為不同的裝置提供不同的網頁,如專門做一個獨立的手機版網頁設計。這樣做的確是可以達到良好的瀏覽效果,但維護上就必須操作複數本版。於是自適應網頁(Resposive Web Design)就誕生了。

自適應網頁設計 (Responsive web design),又稱響應式網頁設計、適應性網頁設計,自適應網頁設計是一個犧牲載入速度的手機網頁解決方案,只做一個版本的設計就能通吃所有大小的螢幕,讓網頁適應不同大小的解析度自動調整排版。


適應性網頁
CSS3 Media Query
自適應網頁設計的主要核心技術是css3 media query,說穿了就是讓不同解析度去套用不同的css設定(看起來很簡單,但會真的實作起來要注意的雜事很多)。

我們可以先看看幾個例子:

Mediaqueri.es這個網站蒐藏了許多案例,而且都有附上對照圖片可以參考(愛貝斯的官網也是屬於自適應網頁設計)。
從左到右分別是不同的螢幕解析度所呈現的版面設計。在傳統 PC 中,會將許多元素並排;在手機中,會變成只有一行。
適應性網頁


Media Query 引用方式
Media Query 的使用方式有兩種:
1. 在 .CSS 檔案中,用 @media 來判斷使用者螢幕寬度,選擇載入哪一段 CSS。
ex: @media screen and (max-device-width: 400px){}
在螢幕小於400px時,套用此css

2. 在 HTML 的 載入的地方,用 media 屬性判斷使用者裝置寬度,選擇載入哪一個 CSS 檔案。
ex: link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" 
在螢幕小於400px時,套用tinyScreen.css

Viewport設定
meta name="viewport" content="width=device-width; initial-scale=1.0"
如果網頁的標頭沒有做這組設定的話,手機會以高解析度來呈現畫面,這就讓字變得很小,使用者還要去做放大而不能直接閱讀。我們需要的是讓行動裝置的螢幕來符合一般的像素公式,單位一樣才比較好做設計。

基本上只要把握上面兩組設定的方式就可以開始製作自適應網頁了,不過如同一開始講的...很多事情都是做了之後才會發現問題的所在(笑)。

自適應網頁系列延伸閱讀:
1.適應性網頁設計 Responsive web design
2.什麼樣的網站適合做適應性網頁?
3.什麼是自適應網頁設計
4.響應式網站的挑戰書
5.自適應網站設計對SEO有什麼好處
報價洽詢