我有一个 100% 宽度的流畅布局的网页。
当我调整浏览器窗口的大小时,页面中的元素会重叠。
我会创建一个类似于这个网站http://bologna.bakeca.it/的效果,当窗口小于固定宽度时停止调整大小。
我有一个 100% 宽度的流畅布局的网页。
当我调整浏览器窗口的大小时,页面中的元素会重叠。
我会创建一个类似于这个网站http://bologna.bakeca.it/的效果,当窗口小于固定宽度时停止调整大小。
您可以为 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 */
}
好吧,你几乎给了自己答案。在你的 CSS 中给包含元素一个最小宽度。如果你必须支持 IE6,你可以使用 min-width-trick:
#container {
min-width:800px;
width: auto !important;
width:800px;
}
这将有效地为您在 IE6 和任何最新的浏览器中提供 800 像素的最小宽度。
@media
在 CSS 中使用看看@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;
}
}