Question

在这里，当屏幕尺寸低于600px时，我想隐藏一个div元素，而不是该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我给了媒体查询，一旦屏幕尺寸低于600px，我就给了属性显示：没有一个按预期工作。

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

在div的html中添加以下条件：

<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 是提供更多参考的链接。

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

2 个答案: