Using Jqmobi to develop app Basics: Grid layout Describes the grid layout, col2 on the large screen will be displayed as two columns, COL3 will be displayed as 3 columns, but if the screen will be displayed as a column, this is the response layout, that is, according to the size of the screen, dynamically changing the layout of the CSS style. The key word for this layout is @media
Search media in the Af.ui.css file to find the following CSS style:
#afui. col2,
#afui col3,
#afui. Col1-3,
#afui. col2-3 {
float:none;
width:100%;
}
#afui. grid:after {
content: ';
Clear:both;
}
@media handheld, only the 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
}
}
You can clearly see that the default width of the col2,col3,col1-3,col2-3 is 100%, which is a single line display,
It becomes more than one column only if the screen width is a minimum width greater than 768px.
This explains why the same code will display a different layout because of the size of the screen. Also explained the official website of that sentence.
On phones, the grid system would always default to a single row. On tablets, the grid'll display inline.
Responsive layout CSS Note that CSS style spaces must not be less, otherwise it will cause no effect
@media screen and (min-width:320px) and (MAX-WIDTH:479PX)
Author: csdn Blog xuexiaodong2009
Back to the column page: http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/