当前位置：文江博客话题详情

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

发布于 2024-09-25 16:32:25 字数 188 浏览 10 评论 0原文

我有一个具有 100% 宽度的流畅布局的网页。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Hello爱情风 2024-10-02 16:32:25

您可以为 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 */
}

You can set min-width property of CSS for body tag. Since this property is not supported by IE6, you can write like:

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

Or:

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

回复收藏 0 原文

西瓜 2024-10-02 16:32:25

好吧，你几乎已经给了自己答案。在 CSS 中为包含元素指定最小宽度。如果您必须支持 IE6，您可以使用 min-width-trick：

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

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

Well, you pretty much gave yourself the answer. In your CSS give the containing element a min-width. If you have to support IE6 you can use the min-width-trick:

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

That will effectively give you 800px min-width in IE6 and any up-to-date browsers.

回复收藏 0 原文

酒废 2024-10-02 16:32:25

在CSS中使用`@media`

看看@media CSS at 规则。

您可以使用 @media screen and (max-width: ...px) 和 @media screen and (max-height: ...px) 并使用 of 设置您的 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;
  }
}

Use `@media` in CSS

Take a look at @media CSS at-rule.

You can use @media screen and (max-width: ...px) and @media screen and (max-height: ...px) and set with of your html component to keep you're page always up to the value you choose. After, if you want users can access the masked content of your page set overflow:auto.

You can't prevent user resize his browser under this values but you're web page will never go under the values you select.

For example, for minimum width = 330px and minimum height = 400px, the CSS can look like :

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;
  }
}

回复收藏 0 原文

~没有更多了~