jquery - 媒体查询和 JQuery 问题

Question

我正在为我的网站使用移动/平板电脑屏幕的媒体查询。当屏幕尺寸针对移动设备缩小时，我会使用很多 jquery 切换功能，这样我可以缩小一些内容，但如果需要可以扩展它。

我的问题是，如果我切换一个项目并展开（显示），然后我将设备旋转到横向，该项目将保持展开，但是正在使用不同的媒体查询来说明该 div 或要隐藏的任何内容。我认为这是因为 Jquery 切换将样式属性添加到实际的 HTML 而不是 CSS。有没有办法获得正确的页面，所以重置切换？如果这有意义吗？

谢谢

戴夫

Answer 1

如果您将以下代码添加到您的站点，它将向横向或纵向的主体节点添加一个类，然后您可以在您的 css 中使用它。希望这会有所帮助。

window.onorientationchange = function() {
  var orientation = window.orientation;
  if (orientation == 0) {
    document.body.setAttribute("class","portrait");
  }else{
    document.body.setAttribute("class","landscape");  
  }
}

Answer 2

在您的函数中，您可以重写 css 规则，如下所示：

document.styleSheets[0].cssRules[1].style.some_attribute='some value';

1 是规则的顺序（从 0 开始）