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

Posted 2023-03-06

【中文标题】如何将此媒体查询与特定 ID 结合使用

【英文标题】：How do I combine this media query with a specific id

【发布时间】：2016-09-07 06:31:28

【问题描述】：

我正在尝试使用现有媒体查询在我的 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;
    

我觉得这距离完成还有几秒钟，但我不知道如何完成它。

【问题讨论】：

如果您只需要它与#frame 一起使用，那么为什么不在您的查询中使用#frame？

我最初解释我的问题时做得很糟糕。我正在更改现有代码，但我需要它只影响#frame 而不是整个网站。

【参考方案1】：

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

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

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

【讨论】：

他们没有编辑代码，没有。他们改变了空白，仅此而已。是 OP 添加了缺少的大括号。

【参考方案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.

我知道这很啰嗦，但我试图深入而不是仅仅给你一个例子让你完全理解，希望我能帮助:)

【讨论】：

查看我对另一个答案的评论（OP 只是忘记在问题中添加最后一个右括号）；这个答案不再适用。