Question

我有这个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 {
        ....
        ....
    }
    ....
    ....
}

现在我希望每当包装器获得“类似小”的类时，即使屏幕不小，所有小屏幕样式也都适用。我不想在媒体查询中复制css代码。我怎么解决这个问题？

另一种解决方案是强制应用媒体查询。有没有办法做到这一点？

Answer 1

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

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

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

Answer 2

在较新版本的Chrome中，您可以"emulate" a mobile device在桌面浏览器中触发/测试媒体查询。（Internet Exploder 11 has the same behavior!）您可能必须在应用仿真后刷新浏览器; Chrome 35仍会部分应用媒体查询，直到我在相关标签中点击刷新。

Answer 3

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

简而言之，您将媒体查询从css中移出，并使用window.matchMedia在JS中测试它们。

当您知道哪一个匹配时，您可以向<html>标记添加className，类似于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添加到任何父元素以仅影响页面的一部分。

Answer 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/

希望这就是你所追求的（超过一年半前）：

Answer 5

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

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

a和b可以有自己的自定义样式：）

强制应用媒体查询

5 个答案: