CSS：缩小div宽度，窗口调整大小但保持最大宽度？

Question

我有一个大的div，宽度为1000像素，我想按照以下方式进行扩展和收缩：

如果用户将浏览器窗口的大小调整为小于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像素。