html - CSS:随着窗口大小调整缩小div宽度但保持最大宽度？

Question

我有一个宽为 1000px 的大 div，我想将其修复为扩展和收缩，如下所示:

如果用户将浏览器窗口的宽度调整为小于 1000px，我想相应地调整该 div 的大小(就像使用 width:100%; 时一样)。

但是，如果用户将浏览器窗口的宽度扩展到大于 1000px，我希望 div 在达到 1000px 时停止增长。

我认为最好的方法是使用 width: 100% 的组合和max-width: 1000px;但这对我不起作用。

谁能建议一种方法来实现这一目标？

该 div 的完整 CSS 是:

#panel
{
  position: absolute;
  margin-left: 342px;
  max-width: 1000px;
  width: 100%;
}

Answer 1

您考虑过媒体查询吗？像这样的东西:

#panel {
    /* ... */
    width: 100%;
}
@media all and (min-width: 1000px) {
   #panel {
     width: 1000px;
   }
}

对于宽度小于 1000 像素的屏幕，将应用 100% 宽度；对于宽度至少为 1000 像素的屏幕，将应用 1000 像素的固定宽度。