Question

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

要求是切换到桌面视图的“大屏幕”并切换到“小屏幕”以进行移动视图。以下是已有的媒体查询。

#include <stdio.h>
#include <unistd.h> // Mac is one of UNIX systems, so we have unistd.h
// ...
FILE *fout = fopen("~/my-pid", "w"); fprintf(fout, "%d\n", getpid); fclose(fout);

如果有人能提出不同的建议，我们将非常感激。

Answer 1

您可以通过简单的媒体查询和HTML的class属性来实现这一点。无需去ngClass。

CSS

@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;
  }
}

Html

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

Answer 2

您只能创建一个类并根据媒体查询更改其属性，如下所示：

@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>

Answer 3

在 app.ts 中

  addclass:any
  ngOnInit(){
    if (window.innerWidth < 658) {
    this.addclass =true
    alert("hgjk")
    } else {
     this.addclass=false
    } 
  }

在 html 中使用 ngClass

<div [ngClass]="{'table-striped':addclass}">
</div>

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

3 个答案: