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

Question

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

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

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

以下是我的媒体查询。(媒体查询于 17 年 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

Answer 1

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

以下是有关 Wufoo 自定义 CSS 的更多信息:

Using Custom CSS to Style Your Forms & Reports

Custom CSS for Wufoo

如果需要，这里有关于 iframe 的更多信息: Applying CSS to an IFrame

希望对你有帮助