過去在「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」曾經歸納出的其中一個結論，對於 "有修改能力、能處理自適應範本"的站長，Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」，這是行動版的最佳選擇。然而，RWD 範本不是那麼好製作，要修改現成的 RWD 範本也需要一定的功力，因此 WFU 思考的是，Blogger 平台下實現 RWD 有沒有比較簡單的方法？
其實官方提供的判斷式語法，就能實現類似 RWD 的效果。只不過判斷式也非萬靈丹，有少數場景無法使用。本篇將分享一則實例，如何在無法使用 Blogger 語法時，製作出 RWD 頁面。
一、RWD 概念
1. 基礎知識
要說明 RWD 實例，得先具備 RWD 的知識。這部分網路上的入門教學文章很多，可直接參考以下：
- RWD 簡單介紹與優缺點、實作入門
- CSS Media Queries 介紹與基礎應用→ CSS 相關語法詳細說明
有了以上基礎後，可以繼續往下看。RWD 簡單說，就是在不同螢幕尺寸的網頁，分別為版面設定不同的 CSS 參數。在市面上手機、平板尺寸多元，還得兼顧螢幕平放、直立效果的情況下，可想而知 RWD 要含括這麼多種效果，是多大的工程了。
2. 是否存在懶人法？
這篇「RWD 必備技術」提到一句話 "其實你不太需要去對每個裝置都去做調整，基本上使用行動裝置的 max-device-width: 480px，就綽綽有餘了"引起 WFU 的注意，這也是 WFU 想要追求的懶人法，如果可以用最少的設定完成 RWD，也就是只設定螢幕寬度 480px 這種情況，那麼的確能增加站長製作 RWD 的意願。
先說結論，懶人法可以應付多數版面，不過也有一點難處，某些情況下需要特別處理，後面章節會有實例說明。
3. Blogger RWD 範例
+綜合口味 分享了他的 Blogger RWD 範本製作經驗，為各種不同螢幕尺寸設定了對應的 CSS，有興趣的讀者可以參考這篇「Responsive Design Blogger 經驗談」，可瞭解 RWD 需要調整的區塊有哪些地方，以及需要具備的技巧。
二、Blogger 判斷式
1. 欄位數量的影響
這是身為 Blogger 平台的小確幸，官方提供了行動版頁面的判斷式，也就是說我們有一個「二分法」的 RWD 功能，可單獨為行動版頁面設定 CSS。
一個正規的 RWD 範本可能至少需要為四~五種螢幕尺寸設定 CSS，也就是「四分法」、「五分法」。但是部落格平台的版面，其實多數使用二~三欄而已，不像一般網站那麼複雜，說實在不太需要到四分法以上。
如果跟 WFU BLOG 一樣只使用了二欄式的版面，那麼其實「二分法」就足夠，可以利用官方的判斷式，來實現懶人 RWD 效果。判斷式語法的使用方法，請參考「Blogger 行動版範本修改技巧」。
2. Blogger 語法的侷限
Blogger 語法並非標準 W3C 語法，不能放在任意的網頁位置，例如「HTML/Javascript」小工具、文章之中，這些地方都不能執行 Blogger 判斷式。唯一能使用的地方，就是 Blogger 範本之中。
如果你的 RWD 效果在 Blogger 範本之中就能搞定，那麼這件事就沒什麼問題。WFU BLOG 有一個特殊案例，「會員中心」需要有 RWD 的效果，但是因為 "會員中心"只會在特定頁面執行，為了縮減範本的容量，不想把 CSS 放在範本之中，導致無法在範本之中使用判斷式來製作 "會員中心"的行動版。
3. 行動版判斷式
行動版判斷式的另一個侷限是，得先開啟 Blogger 行動版。
這是非常重要、也是會被忽略的一點，因為有的站長選擇在後台「關閉行動版」。當關閉行動版之後，Blogger 不會執行行動版範本內容，自然判斷式語法就失效了！
會選擇關閉行動版範本的站長，多半是使用了 RWD 範本。在這種情況下，若還想 "借用判斷式語法"來解決一些問題，那麼可參考本文的實作案例語法。
三、會員中心實例
1. 原始效果
本站的「會員中心」算是一個三欄式的版面配置，其實原本就有為行動裝置另外設定 CSS，但是當初只有利用 "浮動調整欄位寬度"的技巧，並沒有做到 RWD 的真正精神 "調整欄位位置"。
例如原本網頁版的效果如下：
模擬 iPhone4 直立的效果，可看到欄位位置不變，但各欄位變得很彆扭：
這是 iPhone 4 橫躺的效果，螢幕較寬時欄位比較正常，但左邊按鈕變得高度不一：
我們可以得出結論，利用 CSS 設定區塊寬度的百分比，來 "浮動調整欄位寬度"，並非 RWD 好的解決方法，要有好的效果還是得真正改變區塊的排列位置。
2. 改變區塊位置
於是重新規劃了一下「會員中心」的各個區塊，行動版的畫面調整如下：
- 左邊按鈕改成兩排直列，使用全部寬度
- 會員頭像、編號那個區塊，改為置中、使用全部寬度
- 輸入資料改為置中、使用全部寬度
同時，延續「一、RWD 概念」→「2. 是否存在懶人法？」的概念，除了通用的 CSS 內容之外，另外為 480px 寬度以下的螢幕尺寸，單獨調整部分 CSS 內容，例如以下的語法：
@media screen and (max-width: 480px) {
// 填入版面 480px 寬時所調整的 CSS
}修改後的模擬效果如下，這次改用 Nexus 5，先看直立的畫面：
接下來看 Nexu5 橫躺的畫面：
糟糕！左邊按鈕的版面錯亂了~~
原來 Nexu5 橫躺以後的寬度超過 480px，我用的懶人設定法有缺陷，超過 480px 以後，沒有把這個情況判讀為行動裝置，CSS 跑去讀取通用參數，造成了顯示網頁版效果時異常。
四、RWD 二分法的解決方法
1. 完整的 Media Queries 語法
為何有 480px 以上的異狀？原因可能是：沒有為二分法建立兩套不同內容的 CSS。我只單純針對 480px 以下來 "修正"、"調整"原先的 CSS 通用內容，而不是建立一套 480px 以下的 CSS 內容，相信不同的瀏覽器在處理時，多少會引起一些邏輯上的錯誤。
正確的作法應該是，建立兩套 Media Queries 語法：
@media screen and (max-width: 480px) {
// 480px 以下的 CSS
}
@media screen and (min-width: 481px) {
// 480px 以上的 CSS
}這麼做的話就可以避免邏輯上沒有涵蓋的部分，不過缺點就是，兩套內容會讓 CSS 變得很龐大，而且製作兩套 CSS 比較費功夫。
可想而知，二分法已經這麼麻煩的時候，四分法、五分法的處理有多繁瑣了。
2. 使用 Blogger 行動版判斷式
回過頭來，這時就覺得 "Blogger 行動版判斷式"實在太棒了，完全不必理會各種行動裝置螢幕的寬度，不必為各種尺寸做不同設定，只要偵測到是手機的螢幕，一律執行我們設定的 CSS。這樣的做法讓我處理 CSS 非常省事，不必製作兩套 CSS，也讓我的 RWD 懶人法復活。
用判斷式的概念，程式碼我只需要這麼寫就行了：
<b:if cond='data:blog.isMobile'>
// 原本我替 480px 以下設定 的 CSS
</b:if>看一下修改後的「會員系統」畫面：
Nexus 5 橫躺後的畫面，640px 寬一樣被判定為行動版，這才是完美的懶人二分法。
五、Blogger 判斷式的替代語法
如前所述，本站的「會員系統」只想在特定頁面執行，將無法在範本中使用行動版判斷式，那麼該怎麼解決這件事呢？
其實原理也很簡單，行動裝置的網址一律會出現 "m=1"的字串，利用 js 偵測到這個字串時，加入行動版的 CSS 語法即可。
簡單看個範例，首先參考「如何使用jQuery版本」，確定範本中已經安裝了 jQuery。
接著使用以下程式碼：
<!--行動版 css start-->
<span id="mobile_style" style="display: none;">
// 這裡填入所有行動版要執行的 CSS
</span>
<script>
(function ($) {
var $span = $("#mobile_style");
if(location.href.search("m=1") > 0) {
$span.after("<style>" + $span.html() +"</style>");
}
$span.remove();
} )(jQuery);
</script>
<!--行動版 css end, designed by WFU BLOG-->以上的綠色字串，請置換為你的行動版 CSS。當偵測到行動版時，這些 CSS 就會被執行。
六、小結
本文內容很長，做個總結複習一下，Blogger 平台的懶人 RWD 作法有兩種：
- 1. 使用 Media Queries 語法：建立兩套 Media Queries 語法，例如 480px 以下一套 CSS、481px 以上一套 CSS，會比較麻煩一些。
- 2. 使用 Blogger 行動版判斷式：只需要針對行動版的 CSS 進行修正即可。在不能使用官方判斷式語法的情境下，利用 js 判斷網址是否有 "m=1"字串，也可得到跟判斷式一樣的效果。
Blogger 行動版相關技巧：