时间戳

首页 > 解决方案 > 是否可以使用引导程序根据角度的屏幕尺寸设置变量值？

angular - 是否可以使用引导程序根据角度的屏幕尺寸设置变量值？

问题描述

我在这样的角度组件中有一个全局变量，

visibleDays = 7

我希望能够根据屏幕尺寸控制这个值。对于较小的设备，我希望这是 3 而不是 7。是否可以为“sm”、“xs”设备执行此操作？

标签： angularbootstrap-4responsive-design

解决方案

您可以跟踪窗口大小和 innwewidth 的基数更新 visibleDays 的值

应用程序组件

  visibleDays = 7;

  @HostListener("window:resize", []) updateDays() {
    // lg (for laptops and desktops - screens equal to or greater than 1200px wide)
    // md (for small laptops - screens equal to or greater than 992px wide)
    // sm (for tablets - screens equal to or greater than 768px wide)
    // xs (for phones - screens less than 768px wide)
  
    if (window.innerWidth >= 1200) {
      this.visibleDays = 7; // lg
    } else if (window.innerWidth >= 992) {
      this.visibleDays = 6;//md
    } else if (window.innerWidth  >= 768) {
      this.visibleDays = 5;//sm
    } else if (window.innerWidth < 768) {
      this.visibleDays = 3;//xs
    }
    
  }

stackblitz 演示

推荐阅读