Question

当窗口大小低于600px时，我想让文本改变颜色：

文本：

<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

Answer 2

您需要在查询中为您的值添加一个单位，否则该数字没有意义，所以它看起来像这样：

.derp {
    color:red;
}

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

媒体查询：当窗口宽度低于600px时，如何使文本更改颜色

2 个答案: