html - 我的响应式布局没有响应

Question

我正在尝试根据此处的示例和代码实现响应式布局:www.responsivegridsystem.com

我将它包裹了几个容器，因为我需要一个 960px 内容区域，它位于 1000px 容器的中心。

我的意图是当宽度小于 960px 时，两个容器都变成 100% 宽度。布局正是我想要的全尺寸布局，但当小于 960 像素时，它并没有像我想要的那样移动。

当前 CSS(根据建议进行了一些修改，但仍然无法正常工作。):

.masterContainer {
    position:relative;
    margin:0 auto;
    margin-top:-10px;
    background-color:#FFF;
    width:1000px;
    overflow: hidden;
}
.pageContainer {
    position:relative;
    display:table;
    margin:0 auto;
    width:960px;
    overflow:hidden;
}
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 70%;
}
.span_1_of_3 {
    width: 30%;
}

@media only screen and (min-width: 481px and max-width: 960px) {
    .masterContainer {
        width:100%;
    }
    .pageContainer {
        width:100%; 
    }
}

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 100%;
    }
}

HTML

<div class="masterContainer">
    <div class="pageContainer">
        <div class="section">
            <div class="col span_3_of_3" id="header">Header
            </div>
            <div class="col span_3_of_3" id="slideshowContainer">Slideshow
            </div>
        </div>
        <div class="section group">
            <div class="col span_2_of_3" id="contentArea">
            This is column 1
            </div>
            <div class="col span_1_of_3" id="rightColumn">
            This is column 2
            </div>
        </div>
        <div class="col span_3_of_3" id="footer">Footer
        </div>
        <div class="col span_3_of_3" id="bottom">
        </div>
    </div>
</div>

我的@media 代码有问题还是我在其他地方破坏了它？

Answer 1

您的媒体查询告诉 ID 做某事，而您的 HTML 将它们作为类。把它改成这样:

@media only screen and (max-width:960px){
    .masterContainer {width: 100%;}
    .pageContainer {width: 100%;}
}

这是您的代码和查询的 fiddle 。我为示例提供了背景颜色。

JS Fiddle with your code