css - 使用不同的媒体查询单击按钮时使用不同的 css

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()
}

现在这增加了 50px 到 ok 但当它调整大小时它不使用原始媒体查询来改变大小。理想情况下，我需要两组不同的媒体查询，一组用于按钮是否被点击，另一组用于按钮未被点击。

我已经尝试过更改类，但在更改一次大小后并没有做太多事情。看起来它丢失了所有媒体查询。

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

使用带有此选项的 php 吗？我不知所措，似乎已经尝试了一切，谢谢

Answer 1

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

.set-height {
  height: 175px;
}
.booking-md {
  border: 4px solid #ccc;
}
@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
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="booking-md" class="container-fluid booking-md">
  &nbsp;
</div>
<br />
<button type="button" onclick="ret()" class="btn btn-primary btn-return">Return</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script>
  function ret() {
    $('#booking-md').addClass('set-height');
    $('#return').show()
  }
</script>