javascript - 如何检查浏览器调整大小的条件？

我有一个菜单项登录标记，通过媒体查询以及用户是否登录，在移动设备上的显示方式也有所不同。

LargeDevice-登录-ShowMarkup

LargeDevice-已注销-ShowMarkup

SmallDevice-登录-ShowMarkup

SmallDevice-已注销-DoNotShowMarkup

标记的条件在API中，因此我有一个if条件来检查用户是否像这样注销

  if (acs.user.loggedin === false) {
            $('a.navbar-toggle.icon').hide();
            $('#my-menu').show();
     }

其余的仅使用CSS完成，并且可以按预期工作。

唯一的问题是，如果用户已注销并且位于LargeDevice上，然后将其大小调整为小屏幕。如何告诉浏览器检查浏览器的宽度是否已重新调整以重新检查acs.user.loggedin或其他解决方案？

最佳答案

与其直接从Javascript中显示和隐藏元素，不如更改您的JS代码以将CSS logged-in或logged-out类添加到容器元素。

然后，您可以在媒体查询中使用带有该类名的CSS选择器，来进行媒体查询，以指定四种状态：

@media (max-width: 640px) {
   .logged-out a.navbar-toggle.icon {
       display: none;
   }
}