ホームページ > 記事 > ウェブフロントエンド > CSS ビューポート ユニット vw および vmin を使用してレイアウトをさまざまな画面幅に適応させる方法
CSS ビューポート ユニット vw および vmin を使用してレイアウトをさまざまな画面幅に適応させる方法
- WBOYオリジナル
- 2023-09-13 10:58:41597ブラウズ
CSS ビューポート ユニット vw および vmin を使用して、さまざまな画面幅に適応するレイアウトを実装する方法
モバイル デバイスの人気に伴い、レスポンシブ デザインが標準になりました。今日のWebデザインその１。 Web コンテンツを適切に表示することは、さまざまな画面サイズや解像度にわたって特に重要になります。 CSS ビューポートの単位である vw (ビューポートの幅の単位) と vmin (ビューポートの幅と高さの小さい単位) は、レイアウトをさまざまな画面幅に適応させるという目標を達成するのに役立ちます。
レイアウトに vw ユニットを使用する
ビューポート (ビューポート) とは、ユーザーがブラウザーで実際に Web ページを閲覧する領域を指します。 vw 単位はビューポート幅に相対し、1vw はビューポート幅の 1% に相当します。 vw 単位を使用すると、ビューポートの幅に基づいて要素のサイズを変更できます。
たとえば、要素の幅をビューポートの幅の半分に設定できます:
.element {
width: 50vw;
}ビューポートの幅が 1000 ピクセルの場合、要素の幅は 500 ピクセルになります。
レイアウトに vmin 単位を使用する
vw 単位に加えて、vmin 単位を使用して、ビューポートの幅と高さの小さい方に基づいて要素のサイズを調整することもできます。これは、固定アスペクト比の正方形または要素を実装する場合に便利です。
たとえば、要素の幅と高さをビューポートの幅と高さの小さい方の 20% に設定できます:
.element {
width: 20vmin;
height: 20vmin;
}ビューポートの幅が 1000 ピクセル、高さが 800 ピクセルの場合の場合、要素の幅と高さは両方とも 160px になります。
vw ユニットと vmin ユニットを使用して、さまざまな画面幅に適応するレイアウトを実装する例
次は、vw ユニットと vmin ユニットを使用して、さまざまな画面幅に適応するレイアウトを実装する方法を示す例です。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 20vmin;
height: 20vmin;
background-color: orange;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>In 上記の例では、コンテナ div を使用し、4 つのボックス div を 5 ピクセルの間隔で一列に配置しました。ボックスの幅と高さは両方とも、ビューポートの幅と高さの小さい方の 20% です。これは、ボックスが画面の幅に関係なく比例して収まることを意味します。
概要
CSS ビューポート ユニット vw および vmin は、Web ページをデザインするときにさまざまな画面幅のレイアウトに適応するという目標を達成するのに役立ちます。これらのユニットを使用すると、ビューポートのサイズに基づいて要素のサイズとレイアウトを調整でき、レスポンシブ デザインが可能になります。ユーザーが大画面モニター、ラップトップ、またはモバイル デバイスを使用しているかどうかに関係なく、Web コンテンツが美しく適切に表示されることを保証します。
注: vw および vmin ユニットを使用する場合、さまざまなデバイスで正しく表示されるように、さまざまなブラウザの互換性の問題を考慮する必要があります。
以上がCSS ビューポート ユニット vw および vmin を使用してレイアウトをさまざまな画面幅に適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。