An introduction to the responsive layout of using Jqmobi to develop app basics

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/