使用jqMobi开发app基础：响应式布局介绍

  在使用jqMobi开发app基础：Grid布局 中介绍了Grid布局，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)

响应式布局参考文章