Responsive Web Design，簡稱RWD
這是這幾年行動裝置興起後，才變的熱門的設計方式
讓網站能依照裝置的解析度而呈現不同的排版、外觀
好處是寫一份HTML就能對應各種瀏覽平台，比起開發Native App的成本來的低
如果要轉換成原生App也有PhoneGap等框架可以選擇
但是不管怎樣的設計方式，如何帶給使用者最好的瀏覽體驗
RWD比起一般設計有更多的考量，例如：
1.在mobile平台上不會有 hover 的行為存在
2.mobile平台上的操作多以點擊(click)的方式進行
也要思考如何提供一個簡化的操作流程，增進使用者在行動平台的易用性
也因為開發出一份符合各種平台的使用習慣的設計並不簡單
所以不是一昧的在開發上選擇RWD就好了，須依需求選擇開發方式
如果選擇RWD開發，也建議從版面最簡單的行動版本開始，逐步拓展到較複雜的介面
RWD主要包含三個部分
1.CSS media query，透過評估當前瀏覽環境來決定套用的CSS
2.使用百分比等相對性質的CSS，而非過去常用的固定數值
3.非固定的圖像或媒體
RWD最重要的主角就是 media query 了
media query 是CSS3的標準之一，IE直到IE9才有支援
開源函式庫有 media-queries.js 和 respond.js 兩種能用來支援老舊瀏覽器
透過IE的條件式註解引入其中之一，一般瀏覽器會將這一段視為註解而忽略
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
當然若選擇讓IE直接套用其專用CSS也無不可，反正應該也沒人會用mobile IE吧
<!--[if lt IE 9]>
IE專用CSS Link
<![endif]-->
當瀏覽器評估顯示環境為true便會套用
常見的CSS link其實就有media query了 <link rel="stylesheet" href="test.css" media="screen" />
其中的 media 屬性就是限定顯示環境的邏輯表達式
常見的媒體種類有 screen(螢幕)、print(列印)、all(所有)
另外還有不常用的braille(盲人點字法)、tv(電視)、handheld(手機/ PDA裝置)等
aural(聽覺)在 CSS3 已經棄用了，改增加了 speech 與 embossed
除了在引入CSS檔時套用media query外，也可以直接在CSS stylesheet中直接撰寫
而且能設定的邏輯表達式也不光是限定媒體種類，也能針對媒體特徵限定
@media screen and (min-width:480px){ ...}
上述邏輯表達式是假如當前顯示平台為螢幕，且最小寬度有480px時會套用括弧內的CSS
@media print, screen and (monochrome)
另一個例子，邏輯中的"or"以","逗號表示，monochrome則是screen的媒體特徵，表示黑白螢幕
以下為較常用的媒體特徵列表
寬度 - width 、 min-width 、 max-width
高度 - height 、 min-height 、 max-height
裝置寬度 - device-width 、 min-device-width 、 max-device-width
裝置高度 - device-height 、 min-device-height 、 max-device-height
裝置旋轉方向 - orientation，共有portrait(直立)、landscape(橫放)兩種值，mobile中常用的媒體特徵
螢幕顯示比例 - aspect-ratio 、 min-aspect-ratio 、 max-aspect-ratio
裝置顯示比例 - device-aspect-ratio 、 min-device-aspect-ratio 、 max-device-aspect-ratio
色彩 - color(彩色) 、 monochrome(單色)
解析度 - resolution 、 min-resolution 、 max-resolution
設計上會先將共用的CSS先取出
再另外藉由 media query 獨立出各種裝置用的CSS
實際套用的範例：
1.CSS Link
<link rel="stylesheet" type="text/css" href="all.css" media="screen">
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen andmedia="screen and (max-device-width: 480px)">
2.@media
//先設定全部版面都會套用的 CSS
@media screen and (min-width: 1200px) {
....
}
@media screen and (min-width: 768px) and (max-width: 979px) {
....
}
最常看到的作法會是第二種，包含眾多framework也是如此
原因是HTTP request的請求數量對於下載速度有很大影響，stylesheet盡量不要分成太多個
行動裝置的效能較差，所以對於效能上要斤斤計較
例如瀏覽器在處理JavaScript前會先剖析HTML和CSS
所以JavaScript代碼放在底部可以避免因載入程式碼過長，而使得瀏覽器有較長的閒置
CSS的引入順序也應該讓行動版本優先，讓他們能快速取得基本的CSS樣式
舉例提到的一樣，使用media query常見的需求就是辨識當前顯示螢幕的尺寸
但需要注意較新型的手機因使用視網膜螢幕技術
所以在實際尺寸與硬體解析度會有落差
可以使用JavaScript的 window.devicePixelRatio 或 media query 的 device-pixel-ratio 區別
這個屬性最早是由webkit所支援的，但firefox在第18版後也開始支援
為了對應不同的裝置螢幕，設計方式就會是 - 全畫面寬度為 100% ，而主區塊佔60%類似如此的配置
使用上很多部分需要透過算術去換算原本的固定數值的比例
而小數點的部分，因為瀏覽器會進位或捨去尾端的小數點，所以沒必要特別指定
另外相較於水平配置，垂直配置則是不一樣的部分，因為通常不會把垂直部分設為100%
除去人類的閱讀習慣，瀏覽器的對應方式也可能有很大差異，垂直配置可用固定像素配置
字體大小也可以採用 em 取代 px 指定
em是字體的基準大小比例單位，依照裝置中該元素的預設字體大小調整
1 em = 100%，在大多數的行動裝置上是12pt~16px
指定max-width、max-height便可讓圖片依容器等比例調整縮放顯示，而不會超出邊界
例如：max-width:100%; max-height:100%;
此外若圖片是使用CSS的background指定
media query讓行動瀏覽器能套用較低的解析度的圖片，如此也是節省頻寬的好方法
實作上也有看過有人用繪圖函式庫重繪較低解析度的圖給mobile的手法
但如此一方面需要繪圖相關的技術，另一方面是增加Server CPU的loading換取頻寬
依自訂考量選擇實作方式即可
除了上述作法外，viewport是mobile獨有的特色之一
實作上常用標籤的方式加入
手機瀏覽器會預設以大解析度閱讀完整的網頁
在<head>標籤裡增加這段meta後，手機會讓網頁的顯示寬度為螢幕寬度
範例：<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1" />
viewport也可以用CSS設定
@media screen and (min-width: 800px) {
@viewport {
width: device-width;
orientation: portrait;
user-zoom: fixed;
zoom: 1.0;
}
}
viewport標籤告訴瀏覽器想要的頁面尺寸及縮放比例
initial-scale=1宣告頁面的起始縮放比例應該以正常顯示
maximum-scale宣告頁面的最大縮放限制，設定成1則限制使用者自行放大
當然minimum-scale則是最小縮放限制
開放縮放的考量在於使用者是否需要做複雜的手勢操作、內容
要開放則移除maximum-scale宣告
viewport也為mobile帶來四種相對的單位 - vw(idth)、vh(eight)、vmin、vmax
看定義就知道這些單位的內容：
1vw = 1% of the viewport width
1vh = 1% of viewport height
#visible-square {
width: 20vmin;
height: 20vmin;
}
最後設計完後便要檢視設計的精簡程度
評估是否有多餘的JavaScript或圖片的濫用，可以使用http://mobitest.akamai.com/m/index.cgi的工具
這是這幾年行動裝置興起後，才變的熱門的設計方式
讓網站能依照裝置的解析度而呈現不同的排版、外觀
好處是寫一份HTML就能對應各種瀏覽平台，比起開發Native App的成本來的低
如果要轉換成原生App也有PhoneGap等框架可以選擇
但是不管怎樣的設計方式，如何帶給使用者最好的瀏覽體驗
RWD比起一般設計有更多的考量，例如：
1.在mobile平台上不會有 hover 的行為存在
2.mobile平台上的操作多以點擊(click)的方式進行
也要思考如何提供一個簡化的操作流程，增進使用者在行動平台的易用性
也因為開發出一份符合各種平台的使用習慣的設計並不簡單
所以不是一昧的在開發上選擇RWD就好了，須依需求選擇開發方式
如果選擇RWD開發，也建議從版面最簡單的行動版本開始，逐步拓展到較複雜的介面
RWD主要包含三個部分
1.CSS media query，透過評估當前瀏覽環境來決定套用的CSS
2.使用百分比等相對性質的CSS，而非過去常用的固定數值
3.非固定的圖像或媒體
RWD最重要的主角就是 media query 了
media query 是CSS3的標準之一，IE直到IE9才有支援
開源函式庫有 media-queries.js 和 respond.js 兩種能用來支援老舊瀏覽器
透過IE的條件式註解引入其中之一，一般瀏覽器會將這一段視為註解而忽略
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
當然若選擇讓IE直接套用其專用CSS也無不可
<!--[if lt IE 9]>
IE專用CSS Link
<![endif]-->
media query
media query 是邏輯表達式當瀏覽器評估顯示環境為true便會套用
常見的CSS link其實就有media query了 <link rel="stylesheet" href="test.css" media="screen" />
其中的 media 屬性就是限定顯示環境的邏輯表達式
常見的媒體種類有 screen(螢幕)、print(列印)、all(所有)
另外還有不常用的braille(盲人點字法)、tv(電視)、handheld(手機/ PDA裝置)等
aural(聽覺)在 CSS3 已經棄用了，改增加了 speech 與 embossed
除了在引入CSS檔時套用media query外，也可以直接在CSS stylesheet中直接撰寫
而且能設定的邏輯表達式也不光是限定媒體種類，也能針對媒體特徵限定
@media screen and (min-width:480px){ ...}
上述邏輯表達式是假如當前顯示平台為螢幕，且最小寬度有480px時會套用括弧內的CSS
@media print, screen and (monochrome)
另一個例子，邏輯中的"or"以","逗號表示，monochrome則是screen的媒體特徵，表示黑白螢幕
以下為較常用的媒體特徵列表
寬度 - width 、 min-width 、 max-width
高度 - height 、 min-height 、 max-height
裝置寬度 - device-width 、 min-device-width 、 max-device-width
裝置高度 - device-height 、 min-device-height 、 max-device-height
裝置旋轉方向 - orientation，共有portrait(直立)、landscape(橫放)兩種值，mobile中常用的媒體特徵
螢幕顯示比例 - aspect-ratio 、 min-aspect-ratio 、 max-aspect-ratio
裝置顯示比例 - device-aspect-ratio 、 min-device-aspect-ratio 、 max-device-aspect-ratio
色彩 - color(彩色) 、 monochrome(單色)
解析度 - resolution 、 min-resolution 、 max-resolution
設計上會先將共用的CSS先取出
再另外藉由 media query 獨立出各種裝置用的CSS
實際套用的範例：
1.CSS Link
<link rel="stylesheet" type="text/css" href="all.css" media="screen">
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen andmedia="screen and (max-device-width: 480px)">
2.@media
//先設定全部版面都會套用的 CSS
@media screen and (min-width: 1200px) {
....
}
@media screen and (min-width: 768px) and (max-width: 979px) {
....
}
最常看到的作法會是第二種，包含眾多framework也是如此
原因是HTTP request的請求數量對於下載速度有很大影響，stylesheet盡量不要分成太多個
行動裝置的效能較差，所以對於效能上要斤斤計較
例如瀏覽器在處理JavaScript前會先剖析HTML和CSS
所以JavaScript代碼放在底部可以避免因載入程式碼過長，而使得瀏覽器有較長的閒置
CSS的引入順序也應該讓行動版本優先，讓他們能快速取得基本的CSS樣式
舉例提到的一樣，使用media query常見的需求就是辨識當前顯示螢幕的尺寸
但需要注意較新型的手機因使用視網膜螢幕技術
所以在實際尺寸與硬體解析度會有落差
可以使用JavaScript的 window.devicePixelRatio 或 media query 的 device-pixel-ratio 區別
這個屬性最早是由webkit所支援的，但firefox在第18版後也開始支援
百分比的相對性CSS
相較於過去我們會設計成主版面960*640、側欄240*640類似這樣的版面設計為了對應不同的裝置螢幕，設計方式就會是 - 全畫面寬度為 100% ，而主區塊佔60%類似如此的配置
使用上很多部分需要透過算術去換算原本的固定數值的比例
而小數點的部分，因為瀏覽器會進位或捨去尾端的小數點，所以沒必要特別指定
另外相較於水平配置，垂直配置則是不一樣的部分，因為通常不會把垂直部分設為100%
除去人類的閱讀習慣，瀏覽器的對應方式也可能有很大差異，垂直配置可用固定像素配置
字體大小也可以採用 em 取代 px 指定
em是字體的基準大小比例單位，依照裝置中該元素的預設字體大小調整
1 em = 100%，在大多數的行動裝置上是12pt~16px
圖片
透過以百分比設置圖片的外部容器區塊的比例指定max-width、max-height便可讓圖片依容器等比例調整縮放顯示，而不會超出邊界
例如：max-width:100%; max-height:100%;
此外若圖片是使用CSS的background指定
media query讓行動瀏覽器能套用較低的解析度的圖片，如此也是節省頻寬的好方法
實作上也有看過有人用繪圖函式庫重繪較低解析度的圖給mobile的手法
但如此一方面需要繪圖相關的技術，另一方面是增加Server CPU的loading換取頻寬
依自訂考量選擇實作方式即可
除了上述作法外，viewport是mobile獨有的特色之一
實作上常用標籤的方式加入
手機瀏覽器會預設以大解析度閱讀完整的網頁
在<head>標籤裡增加這段meta後，手機會讓網頁的顯示寬度為螢幕寬度
範例：<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1" />
viewport也可以用CSS設定
@media screen and (min-width: 800px) {
@viewport {
width: device-width;
orientation: portrait;
user-zoom: fixed;
zoom: 1.0;
}
}
viewport標籤告訴瀏覽器想要的頁面尺寸及縮放比例
initial-scale=1宣告頁面的起始縮放比例應該以正常顯示
maximum-scale宣告頁面的最大縮放限制，設定成1則限制使用者自行放大
當然minimum-scale則是最小縮放限制
開放縮放的考量在於使用者是否需要做複雜的手勢操作、內容
要開放則移除maximum-scale宣告
viewport也為mobile帶來四種相對的單位 - vw(idth)、vh(eight)、vmin、vmax
看定義就知道這些單位的內容：
1vw = 1% of the viewport width
1vh = 1% of viewport height
#visible-square {
width: 20vmin;
height: 20vmin;
}
最後設計完後便要檢視設計的精簡程度
評估是否有多餘的JavaScript或圖片的濫用，可以使用http://mobitest.akamai.com/m/index.cgi的工具
留言
張貼留言