在[使用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_)