使用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)

响应式布局参考文章

5275.html