窗口调整大小中的最小宽度

Question

我有一个宽度为100%的流动布局网页。

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

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

- pAkY88

Answer 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 */
}

- Chinmayee G

Answer 2

好的，你已经给出了答案。在你的CSS中给包含元素设置一个最小宽度。如果你需要支持IE6，可以使用min-width-trick:

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

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

- DanMan

Answer 3

使用CSS中的@media

查看@media CSS规则。

您可以使用@media screen and (max-width: ...px)和@media screen and (max-height: ...px)来设置您html组件的宽度，以保持页面始终处于您选择的值。之后，如果您希望用户可以访问您网页上遮挡的内容，则设置overflow:auto。

您不能防止用户将浏览器调整为小于这些值，但是您的网页永远不会低于您选择的值。

例如，对于最小宽度= 330px和最小高度= 400px，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;
  }
}

- PaulCrp