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屋!