0

我是 CSS 的新手，只是想知道是否有可能有一个可以通过浏览器屏幕大小修改但不是 Liquid 的相对布局设计。

例如，如果用户最小化屏幕页面仍然保持与全屏相同的布局。我不确定这是可能的，但我所拥有的是一个相对布局，它可以在全屏格式下完美运行，但是当用户最小化或调整页面大小时，所有图片和文本也会最小化，这对于 img 等元素来说还不错（ s) 但它也会影响我的导航菜单，当我调整页面大小时它看起来很糟糕。有没有办法可以阻止它？

4

3 回答 3

2

您可以使用 CSS3 媒体查询。

http://www.w3.org/TR/css3-mediaqueries/

于 2012-05-09T19:12:05.333 回答
1

您似乎正在尝试将容器的大小保持在最小宽度，这样它们就不会与浏览器一起调整大小。为了实现这一点，您可以使用min-width CSS 属性。

<!-- Document -->
<div id="site-wrapper"></div>
<!-- Document -->

该属性应该这样使用

#site-wrapper { min-width: 1000px; /*For example*/ }
于 2012-05-09T19:11:26.650 回答
1

您所说的称为“响应式设计”。

如果你想要一个很好的例子（也只是一个很好的起点），请查看http://twitter.github.com/bootstrap/上的 Bootstrap

看看他们顶部的菜单，看看当你缩小视口（调整窗口大小）时会发生什么。

编辑：

我想他要问的是，他是否可以让它“调整”宽度，但防止元素挤压高度。他的 JSFiddle 使用的是百分比高度。

.row_1
{
    background-color: green;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:30px;
    cursor: pointer;
    z-index: 20;
}
.row_2
{
    background-color: gray;
    position: relative;
    width: 100%;
    height:100%;
    padding: 30px 0px;
}

.row_3 {
    background-color: black;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:30px;
    z-index: 20;
    color: #fff;
}

Here's an updated JSFiddle that may help?

http://jsfiddle.net/xBaTN/

于 2012-05-09T19:15:18.493 回答