Angular 5：使用 ngClass 切换移动和桌面视图的类

Question

我的应用程序使用这些类：“ large-screen ”用于桌面视图，“ small-screen ”用于移动视图。我正在尝试使用ngClass，因此我可以在容器或包装器 div 中的这些类之间切换各种组件，但我的所有实现似乎都不起作用。

要求是桌面视图切换到“大屏”，移动视图切换到“小屏”。下面是已经存在的媒体查询。

@media only screen and (max-width: 415px) {
  .large-screen {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
}

如果有人能提出不同的建议，将不胜感激。

Answer 1

您可以仅创建 1 个类并根据媒体查询更改其属性，如下所示：

@media only screen and (max-width: 415px) {
  .class-name {
    background-color: blue;
  }    
}
@media only screen and (min-width: 415px) {
  .class-name {
    background-color: red;
  }
}

display:none否则，您将不得不在媒体查询中添加您不希望它们出现的类，如下所示：

@media only screen and (max-width: 415px) {
  .small-screen {
    display: block;
  }
  .large-screen {
    display: none;
  }    
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
  .large-screen {
    display: block;
  }
}

这样你就必须在你想要在两个设备上工作的所有 div 中使用它们：

<div class="small-screen large-screen"></div>

如果你想根据变量值来使用，那么 ngClass 就有意义，你可以这样使用：

<div [ngClass]="{'small-screen': isMobile, 'large-screen': !isMobile}></div>