ant*_*5de 3 html javascript css jquery media-queries
我遇到以下情况:
我有用于screenresolution的媒体查询A:宽度<1200px.
我有screenresolution的媒体查询B:宽度> 1200px.
文档中有一个Button,带有一个click事件处理程序.目前我的screenresolution低于1200px,所以Elements使用媒体查询A.在这个事件处理程序中,我想强制我的元素使用媒体查询B.这可能吗？
我知道如何用JS操纵dom,但这就是我想要避免的.这有解决方案吗？
谢谢你的回复.
以一种简单的方式,在您的click处理程序中,如果您尝试向<body>标记添加一个类并在新类中添加所有B媒体查询的CSS并定位所有必需的选择器,那么您的工作就完成了.
分辨率:<1200 px:
A媒体查询..fake-b-class类的Body 使用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;
}
希望你能做得更好.