强制应用媒体查询答案

【问题标题】：Force media query to be applied强制应用媒体查询
【发布时间】：2013-03-17 08:14:35
【问题描述】：

我有这个 html 和 css 代码：

<div class="wrapper">
    <div class="a"></div>
    <div class="b"></div>
</div>

@media all and (max-width: 400px), (max-height: 300px) {
    .wrapper .a {
        ....
        ....
    }
    wrapper. .b {
        ....
        ....
    }
    ....
    ....
}

现在我希望每当 wrapper 获得“like-small”类时，即使屏幕不小，所有小屏幕样式都将适用。我不想在媒体查询中复制 CSS 代码。我该如何解决？

另一种解决方案是强制应用媒体查询。有什么办法吗？

【问题讨论】：

也许是less。
@JaredFarrish：即使使用less、sass或stylus，渲染的css也会被复制。
有趣的问题，是否仅用于调试目的？
如果你想强制媒体查询申请调试，你可以在Chrome里面做。（开发工具、配置、覆盖）。
@vals：在生产中？ :)

标签： css media-queries

【解决方案1】：

为这些部分添加相同的类。

<div class="wrapper">
    <div class="makeMeShine a"></div>
    <div class="makeMeShine b"></div>
</div>

a 和 b 可以有自己的自定义样式:)

【讨论】：

makeMeShine 只是我添加的一个类。例如 .makeMeShine{ 背景：红色； } 。无论在哪里应用 makeMeShine 类，您都会有红色背景。
Axente Paul 绝对不明白你的问题。

【解决方案2】：

在较新版本的 Chrome 中，您可以"emulate" a mobile device 以在桌面浏览器中触发/测试您的媒体查询。 (Internet Exploder 11 has the same behavior!) 应用仿真后您可能需要刷新浏览器； Chrome 35 仍然部分应用媒体查询，直到我在相关选项卡中点击刷新。

【讨论】：

【解决方案3】：

你可以用一点 javascript 来做这样的事情。

简而言之，您会将媒体查询移出 css，并使用 window.matchMedia 在 JS 中对其进行测试。

当您知道哪个匹配时，您可以将 className 添加到 <html> 标记，类似于 Modernizr 的工作方式。所以在手机上你会看到<html class="like-small">。

您的 css 将被编写为利用这些便利类，而不是使用本机媒体查询：

.like-small wrapper.a {}
.like-large wrapper.a {}

（我也喜欢在<html> 中添加 .not-like-small、.not-like-medium 类，以进一步简化 css）

现在，在匹配常规媒体查询并将适当的类名附加到文档后，RWD 几乎可以正常工作。如果你想强制一个特定的样式，你可以重写 HTML 标签上的 classNames 来影响整个页面，或者给任何父元素添加一个 className 来只影响页面的一部分。

【讨论】：

【解决方案4】：

我知道这个问题很老，但希望这就是您要寻找的（因为没有答案）。而且我也不知道在你的 CSS 中添加一个特异性类是否违反了你不重复 CSS 的要求。

您可以通过更改@media 查询的定义来实现您想要做的事情。基本上，不要说您希望屏幕变得小于某个值时发生某些事情，而是将您的小屏幕 CSS OUT 保留在媒体查询中，并为更大的屏幕设置媒体查询。

然后，您只需要更改调用 CSS 的顺序，并为要调用类 like-small 的样式添加特定性。

HTML：

<div class="wrapper like-small">
    <div class="a"></div>
    <div class="b"></div>
</div>


<div class="wrapper">
    <div class="a"></div>
    <div class="b"></div>
</div>

CSS：

.wrapper.like-small .a,
.wrapper .a {
        height:200px;
        width:200px;
        background:purple;
    }

.wrapper.like-small .b,
    .wrapper .b {
       height:200px;
       width:200px;
       background:blue;
 }

@media all and (min-width: 400px), (min-height: 300px) {
    .wrapper .a {
        height:100px;
        width:100px;
    background:yellow;
    }
    .wrapper .b {
       height:100px;
        width:100px;
    background:red;
    }
}

还有小提琴：http://jsfiddle.net/disinfor/70n37hhj/

希望这就是你所追求的（一年半以前:)

【讨论】：

【解决方案5】：

您可以尝试使用 javascript。这句话设置视口宽度并强制浏览器应用您的媒体查询：

$('meta[name="viewport"]').prop('content', 'width=400');

这取自这个答案： https://stackoverflow.com/a/20137580/1401341 正如有人在 cmets 中所说，这仅适用于支持 viewport 标签的浏览器。

【讨论】：