0

我一直在尝试建立一个始终保持其比率并适应用户屏幕尺寸的网站，但我无法实现。

我已经开始构建一个简单的固定宽度/高度框架，如下所示：http: //jsfiddle.net/WxNrh/并开始使用它，但我总是卡住。

我想要实现的是最大宽度为 800 像素，并且取决于用户屏幕分辨率（或者我缩小浏览器窗口的程度），网站会相应地缩小，但始终保持其宽度/高度比。

这是我的固定网站：

<div id="wrapper">
<div id="header">Header</div>

<div id="content">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

<div id="footer">Footer</div>

和CSS：

#wrapper{width: 800px; height: 400px;}
#header{background-color: red; width: 800px; height: 100px;}
#left{float: left; background-color: yellow; width: 200px; height: 200px;}
#right{float: left; background-color: orange; width: 600px; height: 200px;}
#footer{clear: both; background-color: blue; width: 800px; height: 100px;}

我真的很感激任何帮助！:)

编辑：

我用这个 css 得到了想要的效果：

#wrapper{max-width: 800px;}
#header{background-color: red; width: 100%; padding-top: 12.50%;}
#left{float: left; background-color: yellow; width: 25%; padding-top: 25.00%;}
#right{float: left; background-color: orange; width: 75%; padding-top: 25.00%;}
#footer{clear: both; background-color: blue; width: 100%; padding-top: 12.50%;}

但问题是它通过使用填充来工作，这会迫使我的 div 内容向下，这意味着它不是很有用——因为内容不在它应该在的位置。

4

3 回答 3

3

瞧。http://jsfiddle.net/rudiedirkx/WxNrh/2/show/

padding救援。虽然它不是很有用，因为您的内容可能不适合盒子......

魔术是相对填充和绝对定位：

.outer {
    height: 0;
    position: relative;
    /* padding-bottom: 25%; in the actual div like #header */
}
.inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

以及一大堆包装器 div =( (.inner和.outer)：

<div class="outer" id="wrapper">
    <div class="inner">
        <div class="outer" id="header">
            <div class="inner">Header</div>
        </div>
        <div class="outer" id="content">
            <div class="inner">
                <div class="outer" id="left">
                    <div class="inner">Left</div>
                </div>
                <div class="outer" id="right">
                    <div class="inner">Right</div>
                </div>
            </div>
        </div>
        <div class="outer" id="footer">
            <div class="inner">Footer</div>
        </div>
    </div>
</div>

有一种情况非常有用。有时您确实需要保持该纵横比：响应式视频。对于内容框和整个页面：没那么有用。

但是你问！

于 2013-03-23T15:04:23.673 回答
1

尝试这样的事情：

#wrapper{width: 800px; height: 400px;}
#header{background-color: red; width: 100%; height: 25%;}
#left{float: left; background-color: yellow; width: 25%; height: 25%;}
#right{float: left; background-color: orange; width: 75%; height: 25%;}
#footer{clear: both; background-color: blue; width: 100%; height: 25%;}

使用百分比可能不适用于float: left;. 看看情况如何。它失败了，您可以尝试使用max-widthandmax-height或min-widthand min-height。

于 2013-03-23T14:52:44.013 回答
1

使用图像驱动比率

我发现进行比率的最佳方法通常是使用一img组您想要的比率，并以此驱动容器大小。

这是一个修改原始代码的示例小提琴：

HTML

<div id="wrapper">
    <img class="ratioDriver" src="http://dummyimage.com/200x100/000/fff.gif&text=2w:1h+Ratio" />
    <div id="header">Header</div>

    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>

    <div id="footer">Footer</div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

#wrapper{
    width: 100%; 
    max-width: 800px; 
    position: relative;
    margin: 0 auto;
}

.ratioDriver {
   width: 100%;   
   display: block; 
}

#header{
    background-color: red; 
    width: 100%; 
    height: 25%; /* 100 / 400 = .25 = 25% */
    position: absolute;
    top: 0;
    left: 0;
}
#left{
    position: absolute;
    top: 25%;
    left: 0;
    background-color: yellow; 
    width: 25%; /* 200 / 800 = .25 = 25% */
    height: 50%; /* 200 / 400 = .5 = 50% */
}
#right{
    position: absolute;
    top: 25%;
    left: 25%;
    background-color: orange; 
    width: 75%; 
    height: 50%;
}
#footer{
    position: absolute;
    top: 75%;
    left: 0;
    background-color: blue; 
    width: 100%; 
    height: 25%;
}

处理内容的两种方法

您仍然必须决定如何处理您的内容。

选项1

您是否希望它在组件上使用溢出时具有单独的滚动条overflow: auto？如果内容大小未知，这是最佳选择。

选项 2

您是否想尝试缩放它，这将需要固定大小的内容供您计算因素。这实际上只适用于现代浏览器（在 Firefox 19 和 IE9 中运行良好，但 Chrome 25 在撰写本文时无法正常运行）。这个小提琴大致实现了它使用这些添加到上面的 css 并在 html 中添加了一些内容：

html {
    font-size: 1vw;
}
 #header{
    font-size: 3rem;
}
#left{
    font-size: .99rem;
}
#right{
    font-size: 1.25rem;
}
#footer{
    font-size: 1.3rem;
}
于 2013-03-23T16:11:33.220 回答