媒体查询似乎不适用于平板电脑或台式机答案

【问题标题】：Media Queries Don't Appear To Be Working for Tablet or Desktop媒体查询似乎不适用于平板电脑或台式机
【发布时间】：2017-05-16 04:52:28
【问题描述】：

我在这个问题上苦苦挣扎的时间比我关心的要长得多，而且我似乎无法解决这个问题。我正在使用 Wufoo Forms，只是想在各种屏幕尺寸上直观地居中，并使用媒体查询来尝试实现这一点。

要实时查看问题，请访问storanddeliver.com，您会在主页上看到表格。

我已经多次重写了这些，并将它们与 Stack 上的其他答案进行了比较，我似乎找不到任何语法问题，但由于某种原因它们仍然不起作用......（智能手机是唯一的一种适用于所有屏幕尺寸的产品）。感谢大家的帮助！

以下是我的媒体查询。（媒体查询在 2017 年 5 月 12 日 15:55 语法更新）

/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width: 640px) {
   form.wufoo {
       margin-left: 6em !important;
       margin-top: 2em !important;
       clear: both !important;
   }
   body::before {
       content: "mobile to some tablet media query fired";
       font-weight: bold;
       display: block;
       text-align: center;
       background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 99;
 }
}

@media screen and (max-width: 850px) {
    form.wufoo {
        margin-left: 1em !important;
        margin-top: 0 !important;
    }
    body::before {
        content: "tablet media query fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
 }
}

@media screen and (max-width : 1224px) {
    form.wufoo {
        margin-left: 1em !important;
        margin-top: 0 !important;
    }
     body::before {
        content: "laptop media query fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
  }
}

另外，我想区分一下。虽然 Wufoo 表单是通过 iframe 提供的，但它在屏幕调整大小和遇到不同屏幕尺寸期间应该应用的所有 CSS 都来自通过我在 Wufoo 的帐户上传的自定义 CSS 文件......不确定这些额外信息是否有帮助，但只是想确保知道这一点。

完整的 CSS 文件可以在这里找到： https://www.dropbox.com/s/xc61w4m35nefbyr/wufoo%20%281%29.css?dl=0

【问题讨论】：

您可能想看看各种单位（例如“em”）是如何定义的，然后决定您是否使用了正确的单位。
现在根本看不到您的 wufoo 表单？此外，每次我点击您的推荐部分时都会出现一个烦人的弹出窗口，可能需要解决这个问题。
感谢您的回复。我使用“em”来进行缩放和缩放……阅读 Stack 上的某处，在媒体查询中使用“em”与“px”是最佳实践……无论哪种方式，问题仍然存在。 @NathanielFlick，Wufoo 表格现在在那里吗？而且，在推荐部分很好看！谢谢！
抱歉，您的问题链接现在根本不起作用。
@NathanielFlick 抱歉，当我不工作时，该网站已关闭。现在有空的时候请看一下。谢谢！

标签： css media-queries wufoo

【解决方案1】：

您似乎正在尝试向 iframed 表单添加样式。您需要确保使用与 Wufoo 默认样式表相同的 CSS 选择器。

这里有更多关于 Wufoo 自定义 CSS 的信息：

Using Custom CSS to Style Your Forms & Reports

Custom CSS for Wufoo

如果需要，以下是有关 iframe 的更多信息： Applying CSS to an IFrame

希望对你有帮助

【讨论】：