Angular 5:使用 ngClass 切换移动和桌面视图的类 [英] Angular 5: Use ngClass to switch classes for mobile and desktop views

问题描述

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

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

@media only screen and (max-width: 415px) {.大屏幕{显示:无；}}@media only screen and (min-width: 415px) {.小屏幕{显示:无；}}

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

解决方案

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

@media only screen and (max-width: 415px) {.班级名称 {背景颜色:蓝色；}}@media only screen and (min-width: 415px) {.班级名称 {背景颜色:红色；}}

否则，您必须display:none 媒体查询中不希望它们出现的类，如下所示:

@media only screen and (max-width: 415px) {.小屏幕{显示:块；}.大屏幕{显示:无；}}@media only screen and (min-width: 415px) {.小屏幕{显示:无；}.大屏幕{显示:块；}}

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

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

如果你想根据变量值使用，那么 ngClass 是有意义的，你可以这样使用:

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

My application uses these classes: "large-screen" for desktop view and "small-screen" for mobile view. I am trying to use ngClass so I can switch between these classes in the container or wrapper div for various components but all of my implementations don't seem to work.

Requirement is to switch to "large-screen" for desktop view and switch to "small-screen" for mobile view. Below are the media queries already in place.

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

If anyone could suggest something different would be really appreciated.

解决方案

You could create only 1 class and change it's attributes depending on the media-queries, like this:

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

Otherwise you would have to display:none the classes in the media-queries you don't want them to appear, like this:

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

This way you would have to use them both in all your divs that you want to work in both devices:

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

If you want to use depending on a variable value, then the ngClass makes sense, you could use like this:

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

这篇关于Angular 5:使用 ngClass 切换移动和桌面视图的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！