Javascript 如何在有角度的条件下忽略引导类？

上下文：我们正在尝试构建一个布局生成器应用程序，希望查看网格在平板电脑/手机/桌面视图上的外观

<div class="col-sm-3 col-lg-5 col-md-7 black"></div>

例如，如果我有这种类型的div，那么这个类将根据视图的大小启动。所以，如果我在桌面上，当我选择移动设备时，我能做些什么来忽略lg类，而显示sm类，反之亦然

PS：我在stackoverflow周围搜索了一下，没有找到答案

编辑：常见答案：简单答案是肯定的，调整浏览器大小，但我不希望用户这样做，我作为开发人员知道这一点，但非技术人员不会知道这一点，他/她会单击手机/平板电脑图标查看他们的页面。

试试这个

TS

导出类appcomont实现OnInit{
wWidth：编号；
wHeight：数字；
构造函数（）{}
恩戈尼尼特（）{
const ele=document.querySelector（'.lorem'）作为HTMLElement；
ele.addEventListener（'点击'，（e:事件）=>{
this.wWidth=（e.target）.clientWidth；
this.wHeight=（e.target）.clientHeight；//用于ex目的
});
}
}

使用javascript中的本机访问选择器访问元素

HTML

---

根据您的需要编辑表达式，以了解如何实现该概念

调整浏览器大小？不知道“忽略”是什么意思，也不知道具体问题是什么。媒体查询应考虑窗口大小。如果您有问题，请提供一个复制iTunes

ngClass

的。它将满足您的需要。她希望在桌面上“以移动方式”查看页面。虽然Chrome允许您模拟移动设备，并从桌面和viceversa请求移动网站，但Bootstrap中的响应严格按照以像素为单位的视口大小来实现。因此，只需调整浏览器窗口的大小，就可以根据当前浏览器的宽度观察每种情况。为什么不将应用程序加载到这样大小的iframe中呢？

export class AppComonent implements OnInit {
  wWidth: number;
  wHeight: number;

  constructor(){ }

  ngOnInit() {
    const ele = document.querySelector('.lorem') as HTMLElement;
    ele.addEventListener('click', (e: Event) => {
      this.wWidth = (<HTMLElement>e.target).clientWidth;
      this.wHeight = (<HTMLElement>e.target).clientHeight; // for ex purposes
    });
  }
}

<div [ngClass]="{'col-sm-3': wWidth <= 575, 'col-md-7': (wWidth > 575) && (wWidth <= 992), 'col-lg-5': wWidth > 992  }"></div>