无法让媒体查询在移动设备上正常工作

Question

我正在尝试使用媒体查询将文本附加到第二页背景图像的底部。当我编辑padding-top时，它会影响桌面模式下的内容，即使我将媒体查询调整为(max-width: 500px)并保持桌面大于500px(这应该在媒体查询的参数之外，对吧?)，但它对移动视图没有影响。这是我认为代码应该是这样的，它在桌面上看起来很好，但在移动设备上留下了很大的差距。

@media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}

我还尝试添加以下代码来强制移动端没有顶部填充，但它再次对移动端没有影响:

@media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}

Answer 1

这两段代码都不是合法的CSS。

第一:

@media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}

什么也不做。您没有给媒体查询做任何事情-在查询之后有一对匹配的花括号。所以所有东西都有相同的padding-top

第二:

@media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}

有语法错误，媒体查询后面没有右花括号。所有与媒体查询相关的内容都必须放在大括号内。

正确的语法是:

@media screen and (min-width: 250px) and (max-width: 499px) {
.site-boxed-container .site-content{
padding-top: 0%;
}
}

假设你想让宽度在250px到499px之间的viewport的padding为top 0