css - 强制应用媒体查询

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 {
        ....
        ....
    }
    ....
    ....
}

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

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

Answer 1

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

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

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