根据屏幕百分比配置max-height

Question

我使用以下CSS来调整滚动框的高度：

.scroll 
{
//max-height: 750px;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}

我想使用750px，但这对于分辨率较低的屏幕来说太高了。 400px适用于较小的分辨率，但在较大的屏幕上看起来很糟糕。有没有办法按百分比指定这样的东西？当我尝试100％时，它会破坏我的滚动框并使用整个屏幕。

Answer 1

一种解决方案是使用CSS media queries：

@media(max-width:767px){ /* change the max-width to suit your needs */
  .scroll {
    max-height: 400px;
  }
}

@media(min-width:768px){ /* change the min-width to suit your needs */
  .scroll {
    max-height: 750px;
  }
}

Answer 2

我认为你应该使用JS或创建两个CSS文件 - 一个用于PC，另一个用于另一个小设备。