css - 媒体查询 : how to make text change color when window width gets below 600px

Question

我想让我的文本在窗口大小低于 600 像素时改变颜色:

jsfiddle:http://jsfiddle.net/LgsXT/1/

文本:

<div class = "derp">derp derp derp</div>

CSS:

.derp {
color:red;
}

@media (max-width:600) {
    .derp {
        color:blue;
    }
}

但它什么也没做。怎么了？

Answer 1

@media 规则需要 px 或其他单位。另外，注意你的 HTML 中的那些空间，我建议你在屏幕尺寸上工作而不是缩小

<div class="my-box">Derp</div>


.my-box {
    color: red;
}

@media (min-width: 600px) {

    .my-box {
        color:blue;
    }

} /* end break point */

这是一个更强大的fiddle