Question

我要做的是在＆lt; 800处从3列切换到2，然后在＆lt; 640处切换1列。我发现第一个查询已得到确认，但忽略了以下查询。如果我交换查询的位置，则适用相同的规则。对于我在下面使用的内容，我看到最大宽度：800px（蓝色边框）工作 - 它仍然显示在＆lt; 640px。红色边框永远不会显示。

标记：

<div id="colorPalette_container" class="center clearfix">

    <h1>Color Palette</h1>
        <ul class="colorPalette">
            <li class="bg">#f2ede6 [Background]</li>
            <li class="primary">#0b4167 [Primary]</li>
            <li class="secondary">#00538e [Links]</li>
            <li class="logo">#00a7e0 [Logo]</li>
            <li class="text">#f2ede6 [Text]</li>
            <li class="subtext">#56524d [Sub-text]</li>
            <li class="icons">#0b4167 [Icons]</li>
            <li class="rule">#ffffff [Rules]</li>
        </ul>

</div>

原始CSS：

#colorPalette_container {
    margin: 3.125em 0 5em 0;
}

    .colorPalette li {
        list-style-type: none;
        text-align: center;
        width: 30%;
        float: left;
        margin: 0 0.625em 3.125em 0;
        padding: 0.313em;
        color: white;
        font: 1.25em/1.6em "Proxima Nova", Helvetica, Arial, sans-serif;
    }

媒体查询：

@media screen and (max-width: 800px) {
    .colorPalette li {
            width: 45%;
            float: left;
            margin: 0 0.312em 3.125em 0.312em;
            border: 1px solid blue;
        }
};

@media screen and (max-width: 640px) {
    .colorPalette li {
            width: auto;
            float: none;
            margin: 0 0 3.125em 0;
            border: 1px solid red;
        }
};

Answer 1

这只是因为在每个@media规则之后你有一个尾随的分号。删除它们会为您提供预期的行为：

@media screen and (max-width: 800px) {
    .colorPalette li {
        width: 45%;
        float: left;
        margin: 0 0.312em 3.125em 0.312em;
        border: 1px solid blue;
    }
} 

@media screen and (max-width: 640px) {
    .colorPalette li {
        width: auto;
        float: none;
        margin: 0 0 3.125em 0;
        border: 1px solid red;
    }
}

http://jsfiddle.net/tde7r/

Answer 2

也许你可以改变

@media screen and (max-width: 800px)

到

@media screen and (max-width: 800px) and (min-width: 641px)

（未经测试）

多个媒体查询被忽略

2 个答案: