在[使用jqMobi開發app基礎：Grid布局?](http://blog.csdn.net/xuexiaodong009/article/details/18351517)中介紹了[Grid布局](http://blog.csdn.net/xuexiaodong009/article/details/18351517)，col2在大的屏幕上會顯示為兩列，col3會顯示為3列，但如果屏幕小就會顯示為一列，這就是響應式布局，也就是根據屏幕大小，動態改變css樣式的一種布局。這種布局的關鍵字是@media 在af.ui.css文件中搜索media找到如下css樣式： ~~~ #afui .col2, #afui .col3, #afui .col1-3, #afui .col2-3 { float: none; width: 100%; } #afui .grid:after { content: ''; clear: both; } @media handheld, only screen and (min-width: 768px) { #afui .col2 { width: 50%; float: left; } #afui .col3 { width: 33.3%; float: left; } #afui .col1-3 { width: 33.3%; float: left; } #afui .col2-3 { width: 66.6%; float: left; } } ~~~ 可以清楚的看到，col2,col3,col1-3,col2-3 默認寬度都是100%，也就是單行顯示， 只有在屏幕寬度最小寬度大于768px時，才會變成多列。 這樣就解釋了，為什么相同的代碼，會因為屏幕大小而顯示不同的布局。也解釋了官網的那句話。 On phones, the grid system will always default to a single row. On tablets, the grid will display inline. 響應式布局css需要注意的是css樣式的空格一定不能少，否則就會導致沒有效果 ~~~ @media screen and (min-width: 320px) and (max-width : 479px) ~~~ [響應式布局參考文章](http://baike.baidu.com/link?url=xOQQtsZOBMUy_mcwNzjF8CeT5-1JONKwb2BGVWlg8awG9FjbvPQmeeZY-2D8JS21cOluMe2IMRh_Uy_c9NTR6_)