是否可以使用 bootstrap 在 angular 中根据屏幕尺寸设置变量值？

Question

我在 angular 组件中有一个全局变量，

visibleDays = 7

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

Answer 1

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

app.component

  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 demo

是否可以使用 bootstrap 在 angular 中根据屏幕尺寸设置变量值？

Is it possible to set a variable value based on screen size in angular using bootstrap?

responsive-design

bootstrap-4

angular