html - CSS：通过调整窗口大小来缩小 div 宽度但保持最大宽度？

Question

我有一个大 div，宽度为 1000px，我想修复它以扩展和收缩，如下所示：

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

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

我认为最好的方法是使用 and 的组合，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 像素的固定宽度。