jQuery的移動響應網格

Question

我正在構建一個jQuery的移動應用程序，我想實現響應三列設計。側欄只是填充像instagram。小屏幕上的側欄成爲最小寬度，如大屏幕上的10％，它們可以佔據25％的空間。

風格：

.min-width-320px .leftcol, .max-width-480px .leftcol { 
     width:10%; 
} 

.min-width-480px .leftcol, .max-width-768px .leftcol { 
     width:25%; 
} 

.leftcol { 
    position:relative; 
    top:-10px; 
    left:-10px; 
    float:left; 
    width:220px; /* for IE5/WIN */ 
    voice-family: "\"}\""; 
    voice-family:inherit; 
    margin:0 0 -10px 0; 
    padding:10px; 
    background:#e9e9e9; 
    z-index:100; 
    border-right:1px solid #bebebe; 
    height:100%; 
} 

.min-width-320px .rightcol, .max-width-480px .rightcol { 
     width:10%; 
} 

.min-width-480px .rightcol, .max-width-768px .rightcol { 
     width:25%; 
} 

.rightcol { 
    position:relative; 
    top:-10px; 
    right:-10px; 
    float:right; 
    voice-family: "\"}\""; 
    voice-family:inherit; 
    width:220px; /* actual value */ 
    margin:0 0 -10px 0; 
    padding:10px; 
    background:#e9e9e9; 
    z-index:99; 
    border-left:1px solid #bebebe; 
    height:100%; 
    } 

#centercol { 
    position:relative; 
    padding:0 240px; 
    background:#dadbdc; 
    } 

而且在體內主要內容的div

<div id="leftcol" class="leftcol"><!-- begin leftcol --> 
      &nbsp; 
     </div><!-- end leftcol --> 

     <div id="rightcol" class="rightcol"><!-- begin rightcol --> 
      &nbsp;</p>   

     </div><!-- end righttcol --> 

     <div id="centercol"><!-- begin centercol --> 
      This is center col 
     </div><!-- end centercol --> 

，但是當我嘗試在小分辨率是無法調整的內容。

Answer 1

使用網格與媒體查詢解決了問題

代碼在這裏。

<style type="text/css"> 
/* 
When the screen is 30em and below, the column b is stacked below 
column a and column c is hidden. 
*/ 
@media all and (max-width: 30em) { 

.home-breakpoint .ui-block-a { 
    display: none; 
} 
.home-breakpoint .ui-block-b { 
    width: 100%; 
    float:none; 

    } 

.home-breakpoint .ui-block-c { 
    display: none; 
    } 
} 


/* 
When the screen is above 30em and below 48em, columns a and b 
are displayed beside each other, column c is hidden. 
*/ 
@media all and (min-width: 30.1em) and (max-width:48em) { 
.home-breakpoint .ui-block-a { 
    width: 20%;float: left; 
background-color:#e9e9e9; 

} 

.home-breakpoint .ui-block-b { 
    width: 60%;float: left; 

} 
.home-breakpoint .ui-block-c { 
    width: 20%;float: left; 
background-color:#e9e9e9; 

} 
} 


/* 
When the screen is above 48em all 3 columns are shown 
beside each other. 
*/ 

@media all and (min-width: 48.1em) { 
.home-breakpoint .ui-block-a { 
    width: 20%;float: left; 
background-color:#e9e9e9; 

} 

.home-breakpoint .ui-block-b { 
    width: 60%;float: left; 

} 
.home-breakpoint .ui-block-c { 
    width: 20%;float: left; 
background-color:#e9e9e9; 

} 
} 
</style> 

，並在jQuery Mobile的頁面

<div class="ui-grid-b home-breakpoint"> 
    <div class="ui-block-a" > 
     &nbsp; 
    </div> 
    <div class="ui-block-b">        
     <p>This is the middle column.</p> 
    </div> 
    <div class="ui-block-c" >        
     &nbsp; 
    </div> 
</div> 

的內容部分