Question

我尝试使用现有的媒体查询在我的WordPress网站上显示100％宽度的iframe，并且我试图弄清楚我是否可以将iframe ID定位为不受原始媒体查询的影响或者将其与唯一的媒体查询相结合，以仅使用iframe获得完整的帧效果。

这是原始代码

@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
    }
}

这就是我需要它运行的方式，但只能使用id标记#frame

@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
        width: 100%!important;
        max-width: 100%!important;
    }
}

我觉得这是完成后的几秒钟，但我不知道如何完成它。

Answer 1

你的问题不是很清楚。然后，如果您的唯一iframe ID为#frame，则可以定位它：

@media only screen and (max-width: 767px) {
    /* your iframe */
    .responsive #frame { 
        width: 100%!important;
        max-width: 100%!important;
    }
}

您可以添加更多规则，也可以在此媒体查询中定位其他选择器...

Answer 2

您最后错过了}，并且您可以将多个元素标记到CSS声明中，因此如果您希望#frame元素具有相同的属性，则可以执行此操作，因此您的当前代码如下所示： -

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container {
    width: 100%!important;
    max-width: 100%!important;
  }
} // <-- Notice the ending bracket that you missed off, I added that.

然后你可以使用,标记另一个元素，如下所示： -

  @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container, #iframe { // <-- see the , and the element?
    width: 100%!important;
    max-width: 100%!important;
  }
} // <-- Notice the ending bracket that you missed off, I added that.

我知道这是漫长的啰嗦，但我试图深入而不仅仅是给你一个例子让你完全理解，希望我帮助过：）

如何将此媒体查询与特定ID结合使用

2 个答案: