html - 多个媒体查询被忽略

Question

我想做的是在 <800 时从 3 列切换到 2 列，然后在 <640 时切换到 1 列。我发现第一个查询被确认，但以下查询被忽略。如果我交换查询的位置，同样的规则适用。对于我在下面使用的内容，我看到 max-width: 800px(蓝色边框)有效——尽管它仍然显示为 <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/