如何將此媒體查詢與特定ID結合使用

我試圖在現有媒體查詢的WordPress網站上顯示100％寬度的iframe，並試圖找出是否可以將iframe ID定位到不受原始媒體查詢的影響，或將其與唯一媒體查詢結合使用，以僅通過iframe獲得全幀效果。如何將此媒體查詢與特定ID結合使用

這是原來的代碼

@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; 
    } 
}

我覺得這是一個幾秒鐘完成，但我不知道如何完成它。

來源

2016-05-11 Amador

如果你只需要它來處理'＃frame'那麼爲什麼不在你的查詢中使用'#frame'？ – TylerH

我做了一個糟糕的工作，最初解釋我的問題。我正在改變現有的代碼，但我需要它隻影響#frame而不是整個網站。 – Amador

你的問題不是很清楚。然後，如果你唯一的iframe ID爲#frame，你可以針對它：

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

您可以添加更多的規則，你可以針對其他選擇這個媒體查詢過內部...

來源

2016-05-11 18:01:47 LoicTheAztec

他們沒有編輯代碼，沒有。他們改變了空白，僅此而已。這是OP添加了缺失的支撐。 –

你錯過了}末，以及你可以標記多個元素在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.

的n您可以在另一元件上有,像這樣標註： -

@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.

我知道這是長篇大論，但我想深入進去，而不是僅僅給你的例子，所以你完全理解，希望我幫助:)

來源

2016-05-11 19:19:04

看到我對其他答案的評論（OP只是忘了添加最後一個結束括號的問題）;這個答案不再適用。 – TylerH

如何將此媒體查詢與特定ID結合使用

回答

相關問題