9

我正在做一个响应式设计，无论屏幕尺寸是多少，它都必须保持其元素的比例（高度与宽度），所以我不知道任何元素的像素大小，我只能以 % 工作.

我可以将宽度或高度设置为浏览器大小的百分比，但我不知道如何设置其他属性值。

仅使用 CSS，让 JS 计算值不是一种选择。

4

3 回答 3

6

去年我遇到了这个问题，经过一些繁琐的研究后找到了一个模糊的解决方案。不幸的是，它涉及包装器 DIV。结构很简单——你有一个包含内容容器的父 DIV 和另一个设置比例的 DIV。您将margin-top“比例”DIV 设置为父级宽度的百分比......示例：

#parent {
    position: relative;
}
.proportions {
    margin-top: 75%; /* makes parent height to 75% of it's width (4:3)  */
}
.container { /* contents container with 100% width and height of #parent */
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

http://jsfiddle.net/twpTU/

于 2013-07-10T12:09:18.603 回答
0

首先，我知道 OP 已经明确提到他不是在寻找任何 Javascript 方法，但是我认为这对于仍然愿意使用 Javascript 的几个人来说可能很有用。

这是答案；要以相同的百分比设置两者的大小，您可以width通过CSS将父元素的大小设置为，然后使用 Javascript 将父元素的大小设置为. 然后你会有一个方形元素作为父元素。heightwidthwidth: 100%;heightwidth

现在您可以将两者都应用于width: 10%; height: 10%;子元素。然后，为了保持响应，您需要做的只是监听resizewindow事件，然后将其height再次应用于父级，所有子级都将更新。

http://jsfiddle.net/sDzHb/

像这样的东西会让它响应浏览器的大小：

$(window)
    .resize(function() {
        var w = $(document).width();
        $('.parent').height(w);
    })
    .trigger( 'resize' );
于 2013-11-18T12:49:36.860 回答
0

使用 CSS calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc 它在现代浏览器中得到了很好的采用http://caniuse.com/calc作为后备使用 CSS 媒体查询并有最小宽度和高度可以依赖。

显然，您总是可以提前计算这两个百分比。

Div1 需要 60% 的高度，宽度需要是高度的 1/4。60% * .25 = 宽度：15%

div {
    position: absolute;
    border: 2px solid black
}
#div1 {
    width: 40%;
    height: calc(40% * 1.2);
}
#div2 {
    width: calc(90% / 4);
    height: 90%;
}

http://jsfiddle.net/pU4QA/

于 2013-07-10T11:27:56.210 回答