Question

我的媒体查询位于我的普通CSS之下，都在同一文件中，甚至在它们上放！important标记...但是在不同的窗口尺寸上测试它们时它们将无法工作。我觉得我已经尝试了所有方法，但是它始终默认为正常的CSS。不是寻找所有问题的解决方案，而是这样做的原因。例如，让我们以h1标题为准...它不适合我的媒体查询。任何帮助表示赞赏！

此处是网站：https://slhosp.net/

.content{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

div.content h1 {
color: white;
font-weight: 800;
font-size: 5vw;
padding: 30px;
}

div.content p {
color: white;
font-weight: 300;
font-size: 1.5vw;
padding: 30px;
}


@media (min-width: 801px) and (max-width: 1100px) {
.div.content h1 {
    font-size: 8vw;
    padding: 0px;
}
div.content p {
    font-size: 3vw;
    padding: 10px;
}
}

@media (min-width: 451px) and (max-width: 800px) {
.div.content h1 {
    font-size: 8vw!important;
    padding: 0px!important;
}
div.content p {
    font-size: 3vw!important;
    padding: 10px!important;
}
}

@media (max-width: 450px) {
.div.content {
    top: 25%!important;
}
.div.content h1 {
    font-size: 8vw!important;
    padding: 0px!important;
}
div.content p {
    font-size: 4vw!important;
    padding: 10px!important;
}
}

Answer 1

您在div前面有一个圆点，表示它正在寻找“ div”类。应该只是：

div.content h1 {}

您有：

.div.content h1 {}

为什么我的媒体无法查询Arent的工作情况

1 个答案: