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;
    }
}