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

Question

我想在屏幕尺寸低于 600 像素时隐藏一个 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>

当屏幕尺寸减小到 600 像素以下时，我想显示此内容。

<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 类中我给出了媒体查询，一旦屏幕尺寸低于 600 像素，我给出了属性 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

使用“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 中为 div 添加 if 条件：

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

Answer 2

如果你想使用引导大小，你可以在你的 div 上分别使用引导类 d-sm-none 和 d-lg-none，如下所示 -

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

Here 提供更多参考链接。