CSS3 媒体查询似乎不起作用

Question

我的媒体查询出现问题，它似乎无法正常工作。

.cl-home h1
{
    font-family: Raleway;
    position:absolute;
    top: 20%;
    left: 10%;
    font-size: 150px;
    color: white;
    border: 1.5px solid white;
    padding: 10px;
    @media screen and (max-width: 640px){
        font-size: 80px;
    }

}

我认为在宽度低于640px的设备上，字体大小会自动更改为80px。但一切都没有改变。我做错了什么或者我不明白媒体查询是如何工作的吗？

Answer 1

选择器包含在媒体查询中，而不是相反:

.cl-home h1 {
    font-family: Raleway;
    position:absolute;
    top: 20%;
    left: 10%;
    font-size: 150px;
    color: white;
    border: 1.5px solid white;
    padding: 10px;
}

@media screen and (max-width: 640px) {
    .cl-home h1 {
        font-size: 80px;
    }
}