在小屏幕上隐藏一个div元素，并显示另一个div来代替那个div

Question

当屏幕大小低于600px时，我想隐藏一个div元素，而不是显示另一个div元件。请大家帮忙，真的很感激，因为我是这个平台的新手。提前谢谢。

html代码如下所示。

<div class="survey-wrapper container" *ngIf="!form">
<div class="text-center tab-button">
<div
class="col-20 tabStyle"
*ngFor="let tabData of tabArray; let i = index"
[ngClass]="{ completed: i <= navCount }"
>
<img [src]="tabData.active" class="tab-icon" />
<div class="tab-title">{{ tabData.title }}</div>
<img
src="assets/img/digital/arrow_right.svg"
class="tab-arrow"
[ngClass]="{ arrowOpacity: i <= navCount }"
/>
</div>
</div>
</div>

当屏幕大小减少到600px以下时，我想显示这些内容。

<div class="showContainer">
<img [src]="tabData.active" class="tab-icon" />
<div class="tab-title">{{ tabData.title }}</div>
<img
src="assets/img/digital/arrow_right.svg"
class="tab-arrow"
[ngClass]="{ arrowOpacity: i <= navCount }"
/>
</div>

类中使用的类的样式如下。survey wrapper我给出了媒体查询，一旦屏幕大小低于600px，我就给出了属性display：none，它按预期工作。

.survey-wrapper {
position: relative;
text-align: center;
@media (max-width: 600px) and (min-width: 376px) {
display: none;
}
.tabContainer {
border: 1px solid rgba(0, 0, 0, 0.125);
width: 100%;
float: left;
}
.col-20 {
width: 20%;
float: left;
}
.tabStyle.completed {
background-color: #ffffff;
.tab-title {
color: #383838;
}
.tab-arrow.arrowOpacity {
opacity: 1;
}
}
.tabStyle {
background-color: #f9f9f9;
display: flex;
.tab-icon {
height: 23px;
width: 23px;
float: left;
margin-right: 4px;
margin-top: 22px;
}
.tab-title {
float: left;
color: #b3b3b3;
font-family: $font-family-colfax-regular;
font-size: 16px;
font-weight: 500;
line-height: 24px;
padding-right: 4px;
padding-top: 25px;
padding-bottom: 25px;
}
.tab-arrow {
opacity: 0.4;
}
}
.tabStyle:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.tabStyle:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
}

没有编写其他div元素的样式。

Answer 1

如果要使用引导程序大小，可以使用引导程序类d-sm-none&d-lg-none分别在您的div上，如下所示-

<div class="survey-wrapper container d-sm-none" *ngIf="!form">
<div class="text-center tab-button">
<div class="col-20 tabStyle" *ngFor="let tabData of tabArray; let i = index" [ngClass]="{ completed: i <= navCount }">
<img [src]="tabData.active" class="tab-icon" />
<div class="tab-title">{{ tabData.title }}</div>
<img src="assets/img/digital/arrow_right.svg" class="tab-arrow" [ngClass]="{ arrowOpacity: i <= navCount }" />
</div>
</div>
</div>
<div class="showContainer d-lg-none">
<img [src]="tabData.active" class="tab-icon" />
<div class="tab-title">{{ tabData.title }}</div>
<img src="assets/img/digital/arrow_right.svg" class="tab-arrow" [ngClass]="{ arrowOpacity: i <= navCount }" />
</div>

此处为更多参考链接。

Answer 2

用"window.innerWidth"检查窗口大小。您的组件应该是下面的代码：

import { Component, HostListener, AfterViewInit } from '@angular/core';
@Component()
export class AppComponent implements AfterViewInit { 
windowWidth: number = window.innerWidth;
ngAfterViewInit() {
this.windowWidth = window.innerWidth;
}
@HostListener('window:resize', ['$event'])
resize(event) {
this.windowWidth = window.innerWidth;
}
}    

在html fordiv中添加if条件：

<div *ngIf="windowWidth >= 600">Your Content</div>
<div *ngIf="windowWidth < 600">Your Content</div>