监听如果屏幕宽度小于某个值则收缩左边导航

最新推荐文章于 2022-08-01 22:36:00 发布

星良辰寻

最新推荐文章于 2022-08-01 22:36:00 发布

阅读量412

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/josiecici/article/details/106664247

版权

JS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种响应式布局的实现方式，通过监听窗口大小变化来调整左侧导航栏的状态。当屏幕宽度小于1000px时，导航栏会自动折叠，优化了小屏设备的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  mounted() {
    // 监听 如果屏幕宽度小于某个值 则收缩左边导航
    // 网页可见区域宽：document.body.clientWidth
    // 网页可见区域高：document.body.clientHeight
    // 网页可见区域宽：document.body.offsetWidth (包括边线的宽)
    // 网页可见区域高：document.body.offsetHeight (包括边线的宽)
    window.addEventListener(
      "resize",
      () => {
        if (document.body.clientWidth < 1000) {
          this.isCollapse = true;
        }
      },
      false
    );
  },