媒体查询停止工作

Question

我一直在玩一个自适应网站的想法，并且一段时间以来一切都在适应。我只是继续前进，幸福地过着。直到我的媒体查询停止工作。

这些是我的专栏。我不知道为什么，但他们不再工作了。

<p class="left">
    Content             
</p>

<p class="middle">
    More content
</p>

<p class="right">
    Even more content
</p>

这就是假设的CSS，使我的三列成为 如果屏幕太小，则为一列。

@media (max-width: 500px) {

    .left, .middle, .right, {
        width: 100%;
        height: auto;
    }

}

这就是我的专栏分开时的CSS：

.left, .middle, .right {
    float: left;
    width: 170px;
    margin: 10px;
}

我在最后一小时一直把头发拉出来，我已经检查过，这就是我早期版本的代码中出现的情况。在那些版本中，一切正常！

Answer 1

首先放入正常的css语句，然后放入媒体查询语句。 从而： 前

.left, .middle, .right {
    float: left;
    width: 170px;
    margin: 10px;
}

后

@media (max-width: 500px) {

    .left, .middle, .right {
        width: 100%;
        height: auto;
    }

}