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