如何检查是否调整浏览器大小的条件

how to check if condition on resize of the browser?

本文关键字：浏览器 条件 调整 是否 何检查 检查      更新时间：2023-09-26

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

大型设备 - 登录 - 显示标记

大型设备 - 已注销 - 显示标记

小型设备 - 登录 - 显示标记

小型设备 - 已注销 - 请勿显示标记

标记的条件在 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;
   }
}
相关文章：