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开始）

媒体查询和JQuery问题

2 个答案: