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

下午好。我有个小毛病，让我头疼。我有一个ID为“booking md”的DIV，它的大小随媒体查询而改变，并且工作正常

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

我也有一个按钮，使“预订md”的高度更大，就像这样

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

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

---

将php与此结合使用是一种选择吗？我不知所措，似乎什么都试过了，谢谢

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

。设置高度{
高度：175px；
}
.预订部经理{
边框：4px实心#ccc；
}
@媒体屏幕和屏幕（最大宽度：991px）{
.预订部经理{
高度：320px
}
}
@媒体屏幕和屏幕（最大宽度：767px）{
.预订部经理{
高度：220px
}
}
@媒体屏幕和屏幕（最大宽度：560像素）{
.预订部经理{
高度：320px
}
}

返回
函数ret（）{
$（'#booking md'）.addClass（'set-height'）；
$（'#return'）.show（）
}

哇，那太容易了！！我不知道我为什么要这么努力，我只是想在媒体查询中更改高度，然后像这样设置“booking md”高度以适应内容

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

---

很有魅力

嗨，谢谢你，但是它有什么用呢？它将高度设置为零？？我应该把高度放在什么地方吗？在这方面我只是在使用javascript，但没有真正起作用。我尝试过类似的方法，如果我这样做，它会忽略所有媒体查询设置，就像我说的，我需要能够根据按钮在2之间切换

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

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