javascript - 如何更改不同屏幕尺寸的语义UI侧栏的位置？

我正在使用语义UI侧栏-这是一个标准设置：

       <div class="ui inverted labeled icon right inline vertical sidebar menu">
          <a class="item">
            <i class="home icon"></i>
            Home
          </a>
          <a class="item">
            <i class="block layout icon"></i>
            Topics
          </a>
          <a class="item">
            <i class="smile icon"></i>
            Friends
          </a>
          <a class="item">
            <i class="calendar icon"></i>
            History
          </a>
        </div>

这里也有一个JSFiddle。

语义UI的侧边栏使用类right，left，top和bottom定位。我希望侧边栏位于平板电脑和计算机的right位置，而在移动设备上的top位置。

根据屏幕尺寸控制侧边栏位置的最佳方法是什么？换句话说，如何将侧边栏放在手机顶部，而在其他屏幕尺寸上放在右侧呢？

语义UI具有用于显示/隐藏内容的CSS类mobile only，tablet only。但这还不够，因为侧边栏由JavaScript触发，如下所示：

$('.ui.sidebar')
  .sidebar({
    context: $('.bottom.segment')
  })
  .sidebar('attach events', '.menu .tS')
;

所以我想我需要某种JS和CSS的组合才能根据屏幕尺寸实现边栏的动态定位，但是我只是无法到达那儿。

感谢您的建议。从语义UI的角度来看，我对什么被认为是最优雅的解决方案特别感兴趣。

这是我使用语义UI的第一个项目。

一切顺利
ench

最佳答案

仅移动设备和仅平板电脑实际上只是媒体查询，该媒体查询基于某些预定的屏幕宽度显示/隐藏元素。您可以使用jQuery自行执行此操作。

$(window).resize(function () {
   if (window.innerWidth < 600) { //Some arbitrary mobile width
      $(".sidebar").addClass('top').removeClass('right');
   } else {
      $(".sidebar").removeClass('top').addClass('right');
   }
});

关于javascript - 如何更改不同屏幕尺寸的语义UI侧栏的位置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33624778/