CSS сетка, Angular 6 не слушает Media Query - PullRequest
Новая
       16

CSS сетка, Angular 6 не слушает Media Query

0 голосов
/ 29 октября 2019

Игра с добавлением стилей CSS Grid в старое приложение Angular 6. У меня медиа-запрос, который не запускается, и мне интересно, имеет ли он какое-то отношение к angular и его иерархии CSS-правил.

Проблема: Медиа-запрос на 750px должен запускать - менять расположение сетки. Не работает.

Используя инструменты разработчика, я вручную изменил повторение в сетке CSS, и это работает, но независимо от того, что я делаю - даже меняя его на! Важно, медиа-запрос никогда не запускается.

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>

1 Ответ

0 голосов
/ 31 октября 2019

Сначала, как уже упоминалось в комментариях, вы забыли @ перед media.

После исправления вы должны перезаписать конфликтующие правила CSS, используя !important.

И на вашем @media -> .event-box -> grid-template-columns было . вместо ;.

Чтобы узнать больше о !importantза исключением, взгляните на документацию специфичности .

Следующий 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)
}
...