gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:41:57 24 4
gpt4 key购买 nike

我处于以下情况:

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

我有屏幕分辨率的媒体查询 B:宽度>1200 像素。

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

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

感谢您的回复。

最佳答案

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

分辨率:< 1200 像素:

  • 正文使用A媒体查询。
  • 正文 .fake-b-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;
}

希望你能做得更好。

关于javascript - 尽管屏幕分辨率没有改变,但激活不同的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32349861/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com