html - 2016 年にレスポンシブ サイトと CrossBrowse サイトに CSS3 VW と VH を使用することは正しい

Question

レスポンシブ サイトを作成するために 2016 年に css3 vw および vh ユニットを使用する適切な時期と場所があるかどうか、私は迷っていました。私の経験からすると、これが実現する最も簡単な方法です。どうしてこんなことに？また、レスポンシブ サイトを作成するためのより良い方法があれば、共有してください...

Answer 1

VH と VW は、ビューポートの高さ/幅に相対的であるため、ビューポートのサイズに基づいて要素をスケーリングするのに理想的です。

たとえば、2 列のレイアウトが必要な場合は、各列の幅を 50vw に指定するとうまくいきます。Can I Useによると、vmax を使用する必要がない場合、ブラウザのサポートは適切です。

スケーリングはレスポンシブ デザインの 1 つの側面であり、もう 1 つの側面はページ レイアウトの変更です。以下のGeorge Chanturia
が 正しく指摘しているように、以下のコメントはレスポンシブ デザインではなく、アダプティブ デザインに言及しています。

スマートフォンで 2 列のレイアウトを 1 列に折りたたむとします。おそらく、メディア クエリとピクセル、rems、ems を使用する必要があります。

例えば

@media only screen and (max-width: 25em) { 
...
}

また

@media only screen and (max-width: 400px) {
...
}

確かにこれらのメディア クエリ内で VM と VW を使用できますが、実際のメディア クエリでテストできる機能ではありません。

お役に立てれば。