Question

我一直在努力解决这个问题的时间比我所关心的要长得多，我似乎无法解决这个问题。我正在使用Wufoo Forms，我只是想在各种屏幕尺寸上直观地进行中心化，并且正在使用媒体查询来尝试实现这一目标。

要立即查看该问题，请访问storanddeliver.com，您将在主页上看到这些表单。

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

以下是我的媒体查询。（媒体查询于17/12/15 05/12在语法上更新）

/* 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;
  }
}

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

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

Answer 1

看起来你正在尝试为iframed表单添加样式。您需要确保使用的是与Wufoo默认样式表相同的CSS选择器。

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

Using Custom CSS to Style Your Forms & Reports

Custom CSS for Wufoo

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

希望这有帮助

媒体查询似乎不适用于平板电脑或桌面

1 个答案: