尽管屏幕分辨率没有改变，但激活不同的媒体查询

Question

我处于以下情况：

我有屏幕分辨率的媒体查询 A：宽度 <1200 像素。

我有屏幕分辨率的媒体查询 B：宽度>1200px。

文档中有一个带有点击事件处理程序的按钮。目前我的屏幕分辨率低于 1200px，所以 Elements 使用媒体查询 A。在这个事件处理程序中，我想强制我的元素使用媒体查询 B。这可能吗？

我知道如何用 JS 操作 dom，但这是我想在这里避免的。有解决办法吗？

感谢您的回复。

Answer 1

以简单的方式，在您的 click 处理程序中，如果您尝试将 class 添加到 <body> 标记并添加所有 B 媒体查询的 CSS在新 class 中并定位所有必需的选择器，您的工作就完成了。

分辨率：< 1200 像素：

正文使用 A 媒体查询。
正文 .fake-b-class class 使用 B 媒体查询。

希望对您有所帮助。简而言之，您将 B 媒体查询中的所有样式复制到 A.fake-b-class.

考虑此处的 @media 查询示例：

/* This is B style! */
@media screen and (min-width: 1200px) {
    body {
        background-color: lightblue;
    }
}

/* This is A style */
body.fake-b-class {
    background-color: lightblue;
}

希望你越来越好。

尽管屏幕分辨率没有改变，但激活不同的媒体查询

activate different media query although screen resolution does not change

html

javascript

css

jquery

media-queries