CSS媒體查詢和！重要

我有一個使用@media查詢的網站，但它似乎沒有設置它們。他們總是保持默認風格。CSS媒體查詢和！重要

例如：

#div1 { background:red} 

@media screen and (max-height:912px) { 
#div1{background:blue} 
}

將始終與背景堅持：紅色，除非我用!important但我的媒體查詢中我的造型這麼多的選擇。我是否需要設置每個選擇器樣式!important？

來源

2012-04-21 jQuerybeast

您的代碼在我的系統上正常工作。我已經在Mac上測試過Firefox，Chrome和Safari。你的測試環境是什麼？ – Anji 2012-04-21 19:41:02

對不起，延遲迴復。我試圖找出它爲什麼不起作用。這是它：http://jsfiddle.net/TUL6h/3/嘗試通過調整大小使顏色變藍。它從來沒有發生過 – jQuerybeast 2012-04-21 21:47:11

它只會選擇css部分中最後一個的顏色。 – jQuerybeast 2012-04-21 21:48:03

變化最大高度到最小高度：http://jsfiddle.net/jnQYb/

來源

2012-04-21 21:52:38 jQuerybeast

它適用於我。

看看那個：http://jsfiddle.net/TUL6h/1/ - 背景是紅色的，但是當你改變結果部分的高度時，它會在某個點上變成藍色。

你試過什麼瀏覽器？

來源

2012-04-21 19:32:27 MarcinJuraszek

對不起，延遲迴復。我試圖找出它爲什麼不起作用。這是它：http://jsfiddle.net/TUL6h/3/嘗試通過調整大小使顏色變藍。它從未發生 – jQuerybeast 2012-04-21 21:47:20

這是正確的，但它是正確的行爲，因爲'背景：綠色'覆蓋'背景：藍色'。你應該寫這樣的：http://jsfiddle.net/TUL6h/5/來實現這一點。 – MarcinJuraszek 2012-04-22 08:36:07

這不起作用。這可能是瀏覽器問題嗎？ – 2013-12-04 13:34:05

不一定，重要用於覆蓋默認的CSS即覆蓋默認樣式中使用屬性。所以，如果媒體查詢中有新的屬性，你就不必一起使用它。

來源

2012-08-22 13:30:34

！@media查詢中包含的重要代碼的使用是向頁面元素添加動態樣式屬性的有效方式，同時保留「默認」css以保持簡單的維護。

例子：

<html> 
    <head> 
    <style> 
    @media all and (max-width: 768px) { 

    /* CSS styles targeting screens of smaller sizes and/or resolutions (IE phones and tablets) */ 

     #semantically-named-element p 
     { width: 60% !important; 
     background: rgba(0,0,255,1)!important; 
     margin: auto !important; } 

     #semantically-named-element span 
     { display: none !important; } 

    } 
    /* Look ma no media queries needed for default CSS below! Very easy to discern default styles, when the default code is the stuff not wrapped in queries. Period. */  

    /* Default CSS style attributes for any viewports that do not fit into the low or high resolution/screen size parameters set above and below. Also the fallback for browsers that still disregard CSS media queries */ 
    #semantically-named-element p 
     { width: 90%; 
      background: rgba(255,0,0,1); 
      margin: auto; } 

    #semantically-named-element span 
     { display: block; 
      background: rgba(0,0,0,0.8); 
      color: #FFF; 
      text-align: center;} 
    @media all and (min-width: 968px) { 
    /* CSS styles targeting very large or very high resolution viewports at the 769 pixels wide "break-point" */ 
     #semantically-named-element p 
     { width: 80% !important; 
     background: rgba(0,255,0,1)!important; 
     margin: auto !important; } 

     #semantically-named-element span 
     { display: block !important; 
     background: rgba(0,0,0,0.8)!important; 
     color: #FFF !important; font-size: 200%; } 
    } 
    </style> 
    </head> 

    <body> 
     <div id="semantically-named-element"> 
     <p> Usage of !important inside of the code contained within your @media queries is an effective way to add dynamic style properties to your pages elements, while leaving your 'default' css intact for easy maintenance.<span>hidden until tablet greater 768 viewport pixel width</span></p> 
     </div> 
    </body> 
</html>

來源

2013-09-23 00:10:44 NicholasAbrams

綜觀//jsfiddle.net/TUL6h/55/你的例子：您需要更改媒體查詢的順序。 max-height：510px; 包括 max-height：500px; 爲了顯示500px的更特殊情況，它必須先排在第一位。

來源

2013-10-31 09:51:43 emik

jsfiddle.net/TUL6h/55不會是我的。礦被創建到5個。其餘的來自這裏的用戶。 – jQuerybeast 2013-10-31 18:09:26

我有同樣的問題。我意識到媒體查詢必須放在樣式表的最後（即使您在工作流中使用/導入多個文件）。

來源

2016-01-24 20:32:17 jhorapb

CSS媒體查詢和！重要

回答

相關問題