6

だから私はビューポートユニットを発見したばかりで、本当にそれらを使いたいと思っています。

最初の課題：私の要素の「基本サイズ」は760x670ピクセルです。100vhビューポート単位を使用して、高さが、または幅が100vwのどちらか小さい方になるように拡大したいと思います。

残念ながら、100vmin2つのうち小さい方を取得するために使用できますが、適用できるのは幅または高さの両方ではなく、幅または高さの両方にのみ適用できます。

現在使用しているもの：

#root {
    width: 760px;
    height: 670px;
    width: 100vw;
    height: calc(670vw/760);
}

これにより、画面に合わせて幅が拡大縮小され、垂直方向にスクロールします。これはそれほど悪くはありませんが、実際にビューポートに合わせることができれば、私はそれを好みます。

4

1 に答える 1

11

私はそれをIE10で動作させました：

#elem {
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio:16/9) {
    #elem {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}

ライブデモ： http： //jsfiddle.net/C2ZGR/show/（IE10で開く（Windows 7で利用可能なプレビューバージョン）;次に、ウィンドウのサイズを変更して、幅または高さを非常に小さくします）

アスペクト比が16：9の要素を使用しましたが、コードは任意のアスペクト比で機能します。を置き換えるだけ16/9で9/16、希望のアスペクト比になります。

ところで、IE10はこのデモが機能する唯一のブラウザです。Firefox / Operaはまだビューポートユニットを実装していません。WebKitブラウザには現在、ビューポートユニットを内部で使用できないというバグがありますcalc()。

于 2013-01-19T22:42:48.727 に答える