レスポンシブ Web デザインの「width:100%」と「width:100vw」の違いは何ですか?

「Width:100%」と「width:100vw」の明確化

iframe を画面の高さに合わせようとする場合、一般的に次の使用に頼ることになります。 「width:100%」のため「100vh」は完全にレンダリングされず、Chrome の右側に余分な 1 センチメートルのスペースが残ります。ラップトップで。ただし、この矛盾を理解するために、「width:100vw」と「width:100%」の背後にある本当の意味を詳しく調べてみましょう。

vw と vh について

「vw」と「vh」はそれぞれ「ビューポートの幅」と「ビューポートの高さ」を表します。ビューポートは、デバイスの画面上のドキュメントまたはページの表示領域を指します。

「width:100%」と「width:100vw」の区別

「Width:100%」により、要素は、コンテナ内の使用可能なスペース全体を占有します。一方、「width:100vw」は、要素の幅をドキュメントの余白を含む正確なビューポートの幅に設定します。

これは、ドキュメントの余白がゼロ以外の場合、要素は「width:」でレンダリングされることを意味します。 100vw" の幅は、"width:100%" でレンダリングされる幅よりわずかに小さくなります。 「body { margin: 0 }」を設定すると、この違いはなくなります。

「vw」と「vh」の追加の利点

「vw」と「vh」を使用すると、上記の制限に対処できるだけでなく、 " ユニットにはいくつかの利点があります:

• 比例スケーリング: すべて設定フォント サイズや高さなどの Web サイト要素を「vw」単位で指定すると、デバイスのビューポート幅に基づいて比例的なスケーリングが保証されます。
• デバイスの応答性: フォント サイズ変更に「1vw」を使用します (または適切な代替) を使用すると、デスクトップとモバイルの両方で一貫した表示を簡単に確保できます。
• フレームワークの互換性: Bootstrap のようなフレームワークは、「vw」および「vh」とシームレスに動作する「rem」ユニットを利用し、既存のプロジェクトに簡単に統合できます。

以上がレスポンシブ Web デザインの「width:100%」と「width:100vw」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。