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移动页面的内容部分

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

jquery移动响应网格

1 个答案: