jQuery的移动响应网格

我正在构建一个jQuery的移动应用程序，我想实现响应三列设计。侧栏只是填充像instagram。小屏幕上的侧栏成为最小宽度，如大屏幕上的10％，它们可以占据25％的空间。jQuery的移动响应网格

风格：

.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 -->

，但是当我尝试在小分辨率是无法调整的内容。

来源

2014-07-05 Hasan Zubairi

使用网格与媒体查询解决了问题

代码在这里。

<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>

的内容部分

来源

2014-07-06 10:52:33

jQuery的移动响应网格

回答

相关问题