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

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 に答える