覆盖CSS媒体查询 [英] Override CSS media queries

问题描述

我每天使用一个网页，使用CSS媒体查询我不喜欢;我宁愿使用整个页面（大多数都是相关的Twitter Bootstrap菜单折叠时，比768px）。

有一种方法来重写Bootstrap的媒体查询与CSS？优选地，没有定义我自己的媒体查询来单独覆盖所有的规则，因为我觉得这将需要很长的时间。

编辑：我没有控制源代码，否则我只是杀死引导响应代码。

解决方案

为什么不先删除它们？

你不能，你仍然可以重写一个CSS声明与规则：

• 具有相同的选择器优先级，并比MQ块中的规则


• 具有更高的选择器优先级的MQ块
$> pre class =lang-css prettyprint-override> / *一个id，一个类和一个元素=>更高优先级* /
#id element.class {property：value2; }

/ *！important将nuke的优先级。同样的副作用一个nuke，
不在家做，除非你尝试其他方法* /
#id .class {property：value2！important; }

@media（blah）{
/ *覆盖。三次。 * /
#id .class {property：value1; }
}

/ *相同的选择器，除了它之后的一切都在@media之后的一样吗？
然后应用后者。
在@media没有给任何更多的优先级（但它不会应用
无处不在，取决于blah，这是MQ的点）* /
#id .class {property：value2; }


在上面的例子中， @media 块将覆盖里面的，例如有3个原因为什么value2将应用，而不是value1。




I work with a page every day that uses CSS media queries I don't like; I'd rather use the full page (most of them are related to the Twitter Bootstrap menu collapsing when narrower than 768px).

Is there a way to override Bootstrap's media queries with CSS? Preferably without defining my own media queries to override all of the rules individually, as I feel like this would take a pretty long time.

Edit: I don't have control of the source code, otherwise I'd just kill the bootstrap-responsive code.

解决方案

Why wouldn't you remove them in the first place?

If you can't, you still can override a CSS declaration with rules:

• that have the same selector priority and come after the MQ block
• that have higher selector priority than the rule in the MQ block
• that have !important between the value and the semi-colon

    /* one id, one class AND one element => higher priority */
    #id element.class { property: value2; }

    /* !important will nuke priorities. Same side effects as a nuke,
       don't do that at home except if you've tried other methods */
    #id .class { property: value2 !important; }

    @media(blah) {
      /* Overridden. Thrice. */
      #id .class { property: value1; }
    }

    /* same selector, same everything except it comes after the one in @media?
       Then the latter is applied.
       Being in a @media doesn't give any more priority (but it won't be applied
       everywhere, depending on "blah", that's the point of MQ) */
    #id .class { property: value2; }

In the previous example, any of the declaration outside the @media block will override the one inside, e.g. there are 3 reasons why value2 will be applied and not value1.

这篇关于覆盖CSS媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！