Question

我正在尝试在此处基于exmaples和代码实现响应式布局：www.responsivegridsystem.com

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

我的意图是宽度小于960px，两个容器的宽度都是100％。布局正是我想要的全尺寸，但是当它小于960px时它不会像我想要的那样移动。

当前的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%;}
}

这是您的代码和查询的小提琴。我给了他们背景颜色的例子。

JS Fiddle with your code

Answer 2

根据您发布的内容，没有@media代码...如果您希望页面具有响应性，则无法设置特定宽度的设置。 masterContainer width 1000px ..你需要重做一遍，例如：

@media (min-width: 700px), handheld and (orientation: landscape) 
{
   .masterContainer{
     width:60%; // or whatever you may need
   }
}

看看一些例子。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

您需要通过@media查询指定它：

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

Answer 4

你的css中没有媒体查询。

为不同的屏幕尺寸创建单独的文件并在其中放置样式。这是最简单的方法。

阅读这篇文章。它将帮助您了解媒体查询的工作方式。

csstricks media queries

Answer 5

它不起作用的原因是： @media only screen and (min-width: 481px and max-width: 960px)这是一个错误的查询。

它应该是： @media screen and (min-width:481px) and (max-width:960px)

您无法将min和max组合在一起。

我的响应式布局没有响应

5 个答案: