摘要:[jQuery Mobile] Grid 響應式佈局
jQueryMobile 的 Grid 其實是個很特別的東西，表面上看起來像表格，骨子裡卻是紮紮實實的 div 排列，也因如此，在響應式的佈局上 ( RWD )，也就變得更加具有彈性，更難能可貴的是，使用 jQuery Mobile 的 Grid，可以省去不少我們自己撰寫 CSS 的時間，以下就來介紹有趣的 Grid。
範例：jQuery Mobile Grid 響應式佈局
( 使用 EZoApp 工具，可以點選上方 Resize 使畫面改變大小或旋轉畫面測試 )
首先要談到 jQuery Mobile 的 Grid 結構，Grid 比較特別的地方，是由 1~5 個 div 所組成，或許有人會有疑問說為甚麼只能這麼少欄位呢？我想因為在行動裝置上的瀏覽行為不同於電腦上的瀏覽，因此五個欄位也是恰當的配置。( 可以看看現有的 App ，應該很少超過五個欄位的 ) 而程式碼的架構也頗特別，是一個大的 div 包住這幾個 div：
<div class="ui-grid-a">
<div class="ui-block-a">a</div>
<div class="ui-block-b">b</div>
</div>
外層使用 ui-grid- 的樣式，內層使用 ui-block- 的樣式，這裡有個非常重要也需要注意地方，就是 ui-grid- 的後方接著字母 a 代表兩欄，如果改成 b 就是三欄 ，依此類推：
ui-grid-a：2 欄
ui-grid-b：3 欄
ui-grid-c：4 欄
ui-grid-d：5 欄
而 ui-block- 則代表每個欄位，這裡順序非常重要，請照著 abcde 的字母排列：
ui-block-a：第 1 欄
ui-block-b：第 2 欄
ui-block-c：第 3 欄
ui-block-d：第 4 欄
ui-block-e：第 5 欄
了解了規則之後，如果要做一個五欄的 Grid，程式碼就會長成這樣：
( 範例：五個欄位 )
<div class="ui-grid-d">
<div class="ui-block-a">a</div>
<div class="ui-block-b">b</div>
<div class="ui-block-c">c</div>
<div class="ui-block-d">d</div>
<div class="ui-block-e">e</div>
</div>
光靠以上的步驟，就可以輕鬆做出 Grid 了，但這篇文章的標題是：「Grid 響應式佈局」，內容都沒有提到響應式呀！其實 Grid 已經有支援了一部分的響應式佈局，大家可以看看這個範例：Grid 響應式佈局範例，點選上方的 resize，旋轉畫面或改變大小，Grid 都會自動的縮放去適應畫面的寬度。
不過如果我們要做比較進階的響應式佈局，就要自己來寫一些簡單的 CSS 了，以下的範例產生的效果，是在畫面寬度太小的時候，Grid 的畫面會變成全部垂直排列，這個原理其實非常簡單，因為 Grid 是由 div 組成，而每個 div 都有 float 的屬性，我們只要將 div 的 float 設為 none，同時將寬度設為 100% ( 也可以自訂 ) 就可以滿足全部垂直排列的需求。
( 下方 CSS 的 @media，表示在最大寬度小於 240px 的時候，會執行這段 CSS )
@media screen and (max-width: 240px){
.myStyle{
float:none;
width:100%!important;
margin:5px 0;
}
}
完成後，就可以做出更多的變化囉！
範例：jQuery Mobile Grid 響應式佈局
( 點選上方 Resize 使畫面改變大小或旋轉畫面測試 )