Блог

Я создаю мобильное приложение 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 id="leftcol" class="leftcol"><!-- begin leftcol -->
            amp;nbsp;
        </div><!-- end leftcol -->

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

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

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

но когда я пробую это на небольшом разрешении, это не изменяет размер содержимого.

Использование сеток с медиа-запросами решило проблему

код находится здесь.

 <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" > 
       amp;nbsp;
    </div>
    <div class="ui-block-b">                            
      <p>This is the middle column.</p>
    </div>
   <div class="ui-block-c" >                            
      amp;nbsp;
   </div>  
</div>