【问题标题】：Min width in window resizing窗口大小调整的最小宽度
【发布时间】：2022-02-10 20:56:47
【问题描述】：

我的网页布局流畅，宽度为 100%。

当我调整浏览器窗口的大小时，页面中的元素会重叠。

我会创建一个类似于这个网站http://bologna.bakeca.it/ 的效果，当窗口小于固定宽度时停止调整大小。

【问题讨论】：

【解决方案1】：

您可以为 body 标签设置 CSS 的 min-width 属性。由于 IE6 不支持该属性，可以这样写：

body{
   min-width:1000px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   width:1000px;            /* As IE6 ignores !important it will set width as 1000px; */
}

或者：

body{
   min-width:1000px; // Suppose you want minimum width of 1000px
   _width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}

【讨论】：

【解决方案2】：

嗯，你几乎给了自己答案。在你的 CSS 中给包含元素一个最小宽度。如果你必须支持 IE6，你可以使用 min-width-trick：

#container {
    min-width:800px;
    width: auto !important;
    width:800px;
}

这将有效地为您在 IE6 和任何最新浏览器中提供 800 像素的最小宽度。

【讨论】：

【解决方案3】：

在 CSS 中使用 `@media`

看看@media CSS at-rule。

您可以使用@media screen and (max-width: ...px) 和@media screen and (max-height: ...px) 并设置您的html 组件，以使您的页面始终保持您选择的值。之后，如果您希望用户可以访问您的页面集overflow:auto 的屏蔽内容。

您无法阻止用户在此值下调整其浏览器的大小，但您的网页永远不会低于您选择的值。

例如，对于最小宽度 = 330 像素和最小高度 = 400 像素，CSS 可以如下所示：

body{
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 330px){
  html{
      width: 330px;
      overflow: auto;
  }
}
@media screen and (max-height: 400px){
  html{
      height: 400px;
      overflow: auto;
  }
}

【讨论】：

在 CSS 中使用 @media

在 CSS 中使用 `@media`