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

【问题标题】：Can't get Media Query to work properly for mobile无法让媒体查询在移动设备上正常工作
【发布时间】：2021-10-10 17:31:29
【问题描述】：

我正在尝试使用媒体查询将文本附加到第二页背景图像的底部。当我编辑 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%;
}

【问题讨论】：

对不起，我不知道该怎么做。
点击编辑你的帖子，之后，点击括号添加代码{}
您能否检查一下您发布的 CSS，因为它的语法不正确。如果您在其开发工具中进行检查，您的浏览器应该会报错。

标签： css wordpress media-queries

【解决方案1】：

您显示的代码的 sn-ps 都不是合法的 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%;
   }
}

假设您想为宽度在 250 像素和 499 像素之间的视口设置上边距为零。

【讨论】：