Question

下午好。我有一个小问题使我头疼。我有一个ID为'booking-md'的DIV，它随媒体查询而改变大小，并且可以像这样很好地工作。

<div id="booking-md" class="container-fluid booking-md"></div>

和媒体查询将其更改为：-

@media screen and (max-width:991px) {
    .booking-md { height: 320px}
}

@media screen and (max-width:767px) {
    .booking-md { height: 220px}
}

@media screen and (max-width:560px) {
    .booking-md { height: 320px}
}

我还有一个按钮，可以像这样使'booking-md'的高度更大

<button type="button" onclick="ret()" class="btn btn-return">Return</button>

function ret() {
$('#booking-md').css('height', '175px');
$('#return').show()
}

现在，这会将确定大小增加50像素，但是在调整大小时，它不会使用原始媒体查询来更改大小。理想情况下，我需要进行两组不同的媒体查询，一组用于单击if按钮，另一组用于单击if。

我尝试过通过更改类来进行此操作，但是在更改一次大小之后并没有做太多事情。看起来它丢失了所有媒体查询。

document.getElementById("booking-md").className = "booking-sm";

是否将php与这个选项一起使用？我很茫然，似乎已经尝试了一切，谢谢

Answer 1

@ wayneuk2，请查看下面的工作片段，对您自己的代码进行了一些小的更新，希望对您有所帮助：）

<input matInput [mask]="myMask" [(ngModel)]="dateModel">

<button type="button" (click)="removeMask()">RemoveMask</button>
<button type="button" (click)="addMask()">AddMask</button>

export class AppComponent {
  myMask = '(0000)';
  tempData: null;

  public dateModel;

  removeMask() {
    this.myMask = null;
    this.tempData = this.dateModel;
    this.dateModel = null

  }

  addMask() {
    this.dateModel = this.tempData;
    this.myMask = '(0000)'
  }
}

Answer 2

哇，很简单！不知道为什么我要尝试艰难的方法，我只是简单地改变了媒体查询的高度，而只是像这样设置“ booking-md”高度以适合内容。

.booking-md {height:auto;overflow: hidden;)

像魅力一样工作

通过不同的媒体查询点击按钮时使用不同的CSS

2 个答案: