CSS 媒体查询和 !important答案

【问题标题】：CSS media queries and !importantCSS 媒体查询和 !important
【发布时间】：2012-05-02 23:23:46
【问题描述】：

我有一个使用@media 查询的网站，但它似乎没有设置它们。它们始终保持默认样式。

例如：

#div1 { background:red}

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

除非我使用!important，否则将始终坚持使用background:red，但在我的媒体查询中，我设置了很多选择器的样式。我需要设置每个选择器样式!important 吗？

【问题讨论】：

您的代码在我的系统上运行良好。我已经在 Mac 上测试了 Firefox、chrome 和 safari。你的测试环境是什么？
抱歉回复晚了。我试图弄清楚为什么它不起作用。这里是：jsfiddle.net/TUL6h/3 尝试通过调整大小使颜色变为蓝色。它永远不会发生
它只会选择css部分最后的颜色。

标签： css media-queries

【解决方案1】：

我遇到了同样的问题。我意识到媒体查询必须在样式表的末尾（即使您在工作流程中使用/导入多个文件）。

【讨论】：

【解决方案2】：

将最大高度更改为最小高度：http://jsfiddle.net/jnQYb/

【讨论】：

【解决方案3】：

对我来说很好用。

看一下：http://jsfiddle.net/TUL6h/1/ - 背景是红色的，但是当您更改结果部分的高度时，它会在某个点变为蓝色。

你在用什么浏览器？

【讨论】：

抱歉回复晚了。我试图弄清楚为什么它不起作用。这里是：jsfiddle.net/TUL6h/3 尝试通过调整大小使颜色变为蓝色。它永远不会发生
没错，但这是正确的行为，因为background: green 会覆盖background: blue。你应该这样写：jsfiddle.net/TUL6h/5 来实现。

【解决方案4】：

看看你在 //jsfiddle.net/TUL6h/55/ 中的例子：您需要更改媒体查询的顺序。最大高度：510px；包括最大高度：500px；它必须排在第一位才能显示 500px 蜜蜂的更特殊情况。

【讨论】：

jsfiddle.net/TUL6h/55 不会是我的。我的最多创建了 5 个。其余的来自这里的用户。

【解决方案5】：

不一定，!important 用于覆盖默认 css 即覆盖默认样式中使用的属性。因此，如果媒体查询中有一个新属性，您不必同时使用它。

【讨论】：

【解决方案6】：

在@media 查询中包含的代码中使用 !important 是向页面元素添加动态样式属性的有效方法，同时保持“默认”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>

【讨论】：