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

Answer 2

试试这个

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

Answer 3

您无法在CSS属性块中插入媒体查询。试试这个：

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

媒体查询仅在验证其条件时才定义（并覆盖）新属性。

CSS3媒体查询似乎无法正常工作

3 个答案: