时间戳

首页 > 解决方案 > CSS网格，Angular 6不听媒体查询

css - CSS网格，Angular 6不听媒体查询

问题描述

尝试将 CSS Grid 样式添加到旧的 Angular 6 应用程序中。我有一个没有触发的媒体查询，我想知道它是否与角度及其 CSS 规则的层次结构有关。

问题：在 750 像素以下的媒体查询应该触发 - 更改网格布局。不工作。

使用开发工具，我手动更改了 CSS 网格上的重复，它可以工作，但无论我做什么 - 甚至将其更改为 !important，媒体查询都不会触发。

CSS：

media (max-width:750px){
.wrapper{
width:100%;
display:grid;
height:auto;
grid-template-columns: 1fr;  <-------doesn't fire
} 


  .event-box{
    grid-template-columns: repeat(1, 1fr) . <-------doesn't change 
  } 
}
.wrapper {

  font-size: 13.5px;
  line-height: 1.2em;
  box-sizing: border-box;
  width: 100%;

  font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica,
    Arial, sans-serif;

  min-height:1000px;
  height:auto;
  display:grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 4fr;  <---------doesn't stop on mobile
  grid-auto-rows: minmax(50px, auto);
  text-align: center;
  background: #f9f3d8;

  box-shadow: 0 0 1.5em #867453;

}


   .event-box{
  padding-top:2%;
  display:grid;
  grid-gap: 1em;
  grid-template-columns:repeat(3, 1fr);  <-----fires regardless
  grid-auto-rows:minmax(25%, auto)

}

 @Component({
 selector: 'app-day',
 templateUrl: './day.component.html',
 styleUrls: ['./day.component.css']
})

<div class="banner-image" >
  <h1 class="banner-text">WELCOME TO THE JUNGLE </h1></div>
<div class="wrapper">
  <div class="side-box">
    <div class="party-info-box box red-text-lg">
      <div class="box-shade"></div>
      <p>Food: {{partyFood}}</p>
      <p>Water: {{partyWater}}</p>
      <p>Space: {{partySpace}}</p>
    </div>
    <div class="dm-controls-box red-text-lg box">
      <div class="box-shade"></div>
      <label>Food per day:</label>
      <input [(ngModel)]="this.dailyFood" placeholder="change food consumption rate">
      <br>
      <label>Water per day:</label>
      <div>
        <input [(ngModel)]="this.dailyWater" placeholder="change water consuption rate">
      </div>
      <div>
        <label>Edit Food: </label>
        <input placeholder="change food supply" [(ngModel)]="partyFood">
        <br>
        <label>Edit Water: </label>
        <input placeholder="change food" [(ngModel)]="partyWater">
      </div>
    </div>
  </div>
  <div class="content-box">
    <div class="top-box ">
      <div class="weather-box box red-text-lg" >
        <p>Welcome to the jungle</p>
        <div class="red-border"></div>
        <p class="black-text">Select a location to see what happens today</p>
        <ng-container *ngFor="let weather of this.weather; let i = index" class="black-text">
          <div class="black-text">
          <h2 class="red-text-lg">{{weatherLabelArr[i]}} Weather: {{this.weather.title}}</h2>
          <p>{{this.weather.text}}</p>
        </div>
        </ng-container>
      </div>
      <div class="day-buttons-box box red-text-lg">
        <h3>Select Location</h3>
        <div class="button-box">
        <button class="button"  (click)="getBeach();">Beach</button>
        <button class="button" (click)="getNoUndead();">NoUndead</button>
        <button  class="button"(click)="getUndead();">Undead
          Jungle</button>
        <button class="button" value="greaterUndead()" (click)="getGreaterUndead();">Greater
          Undead
          Jungle</button>
        <button  class="button"value="river" (click)="getRiver()">River</button>
        <button  class="button"value="river" (click)="getSwamp()">Swamp</button>
        <button  class="button"(click)="this.undeadService.getCurrentMonster('Guard')">test button</button>
      </div>
      </div>
    </div>
    <div class="main-box">
        <div *ngIf="this.rollResults; else noResults" class="event-box">
          <ng-container *ngFor="let result of this.rollResults">
            <ng-container *ngIf="result.title red-text-lg">
              <div class="event-card">
                <div class="event-title red-text-lg">
                  <h3>{{result.title}}</h3>
                 <div class="red-border"></div>
                </div>
                <div class="event.text black-text">
                  <p>{{result.text}}</p>
                </div>
              </div>
            </ng-container>
          </ng-container>
          <ng-template #noResults>
            <p>Nothing Happened.....</p>
          </ng-template>
        </div>
      </div>
  </div>
</div>

标签： cssangularmedia-queriescss-grid

解决方案

起初，正如您在评论中提到的那样，您已经忘记了@前面的media。

修复此问题后，您必须使用!important.

在你的@media-> .event-box->grid-template-columns上是一个.而不是;.

要了解有关!important异常的更多信息，请查看specificity 的文档。

下面的 CSS 应该可以解决问题：

@media(max-width:750px) {
  .wrapper {
    width: 100%;
    display: grid;
    height: auto;
    grid-template-columns: 1fr !important; // '!important' to overwrite
  }
  .event-box {
    grid-template-columns: repeat(1, 1fr); // changed '.' to ';' and '!important' to overwrite
  }
}

.wrapper {
  font-size: 13.5px;
  line-height: 1.2em;
  box-sizing: border-box;
  width: 100%;
  font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
  min-height: 1000px;
  height: auto;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 4fr;
  grid-auto-rows: minmax(50px, auto);
  text-align: center;
  background: #f9f3d8;
  box-shadow: 0 0 1.5em #867453;
}

.event-box {
  padding-top: 2%;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(25%, auto)
}

推荐阅读