html - 如何在宽度减小时增加高度？

Question

我想在屏幕宽度减小到 979px 以下时增加 div 的高度，我想在 div 样式标签中而不是在 CSS 文件中执行此操作。

<div class="slider-item overlay" data-stellar-background-ratio="0.5">

.slider-item {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    height: calc(100vh);
    min-height: 700px;
    position: relative;

.slider-item:before {
    content: "";
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: .3;

这应该很容易做到(我想，我对 CSS 不是很自信)，但是当我有:

style="@media (max-width:979px) height:120vw;"

在我的 div 标签中没有任何反应。

非常感谢任何帮助。

Answer 1

媒体查询是这样定义的

@media only screen and (max-width: 979px)
{

  .slider-item
  {
    height:120vw;
  }

}

您需要设置您所指的类:在您的情况下是 slider 元素