1

我想要做的是在 <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;
        }
};
4

2 回答 2

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/

于 2013-08-22T15:39:12.797 回答
0

也许你可以改变

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

至

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

（未测试）

于 2013-08-22T15:28:55.983 回答