14

我有这个 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 代码。我该如何解决？

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

4

5 回答 5

4

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

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

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

于 2016-05-17T08:35:23.367 回答
1

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

简而言之，您会将媒体查询移出 css，并在 JS 中使用window.matchMedia.

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

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

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

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

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

于 2014-10-23T14:48:23.780 回答
0

在较新版本的 Chrome 中，您可以“模拟”移动设备，以便在桌面浏览器中触发/测试您的媒体查询。（Internet Exploder 11具有相同的行为！）您可能需要在应用仿真后刷新浏览器；Chrome 35 仍然部分应用媒体查询，直到我在相关选项卡中点击刷新。

于 2014-07-15T14:10:27.247 回答
0

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

您可以通过更改查询的定义来实现您想要做的事情@media。基本上，与其说您希望屏幕变得小于某个值时发生某些事情，不如让您的小屏幕 CSS 远离媒体查询，并为更大的屏幕设置媒体查询。

然后，您只需要更改调用 CSS 的顺序，并将特定性添加到要调用 class 的样式中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/

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

于 2014-10-23T15:11:41.377 回答
-3

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

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

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

于 2013-03-27T09:41:58.787 回答