ホームページ > 記事 > ウェブフロントエンド > CSS ビューポート ユニット vw および vh を使用して、タブレットやモバイルの画面に適応するレイアウトを実装する方法
CSS ビューポート ユニット vw および vh を使用して、タブレットやモバイルの画面に適応するレイアウトを実装する方法
- PHPzオリジナル
- 2023-09-13 12:26:001319ブラウズ
CSS ビューポート ユニット vw および vh を使用して、タブレットや携帯電話の画面に合わせたレイアウトを実装する方法
レスポンシブ Web レイアウトを設計する場合、さまざまなデバイスを考慮する必要があることがよくあります。スクリーンのサイズ適応の問題。 CSS ビューポート単位の vw (ビューポートの幅) と vh (ビューポートの高さ) は、タブレットやモバイルの画面にレイアウトを適応させる簡単な方法を提供します。
ビューポート単位 vw と vh は、ビューポートの幅と高さを基準にして計算されます。1vw はビューポートの幅の 1% に等しく、1vh はビューポートの高さの 1% に等しくなります。これらの単位を適切に使用することで、さまざまなビューポート サイズで要素のサイズと位置を簡単に制御できます。
CSS ビューポート ユニット vw と vh を使用して、タブレットや携帯電話の画面に合わせたレイアウトを実装する方法を詳しく紹介します。
- 基本スタイルの設定
レイアウトを開始する前に、ページのデフォルト スタイルがさまざまなデバイス画面に適応するように、いくつかの基本スタイルを設定する必要があります。まず、次のスタイルを body 要素に追加できます:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}これにより、デフォルトのマージンとパディングが削除され、ボックス モデルがボーダー ボックス モデルに設定されます。
- vw 単位と vh 単位を使用して要素サイズを設定する
レイアウトを設計するときは、さまざまなビュー ウィンドウ サイズでのページ要素のサイズ変化を考慮する必要があります。 。このとき、vw および vh 単位を使用して要素のサイズを設定できます。
.element {
width: 50vw; /* 宽度为视窗宽度的 50% */
height: 30vh; /* 高度为视窗高度的 30% */
}幅と高さを相対的な単位値に設定することで、要素がさまざまなビューポート サイズにわたって適切な比率を維持できるようになります。
- vw および vh 単位を使用して要素の位置を設定する
要素のサイズを設定することに加えて、ページ上の要素の位置も考慮する必要があります。このとき、vw および vh 単位を使用して要素の位置を設定できます。
.element {
position: absolute;
left: 50vw; /* 左边距为视窗宽度的 50% */
top: 25vh; /* 上边距为视窗高度的 25% */
}left プロパティと top プロパティを相対単位値に設定することで、ビューポート サイズが異なっても要素の相対位置が変わらないことを保証できます。
- メディア クエリを使用してレイアウトを調整する
メディア クエリを使用すると、さまざまなデバイスの画面サイズに応じてさまざまなスタイルやレイアウトを適用できます。
たとえば、画面の幅が 768 ピクセル未満の場合、要素のサイズと位置を調整できます。
@media (max-width: 768px) {
.element {
width: 80vw;
height: 25vh;
left: 10vw;
top: 15vh;
}
}このように、画面の幅が 768 ピクセル未満の場合、 .element 要素のサイズと位置はメディアに従います。クエリ内のスタイルは調整されます。
要約すると、CSS ビューポート ユニット vw および vh を使用することで、タブレットやモバイル画面へのレイアウトの適応性を簡単に実現できます。要素のサイズと位置を相対的な単位値に設定し、メディア クエリを組み合わせてさまざまなデバイスの画面サイズに適応させることで、Web ページがさまざまなデバイス上で最高のユーザー エクスペリエンスを確実に提供できるようになります。
サンプルコード:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.element {
width: 50vw;
height: 30vh;
position: absolute;
left: 50vw;
top: 25vh;
background-color: red;
}
@media (max-width: 768px) {
.element {
width: 80vw;
height: 25vh;
left: 10vw;
top: 15vh;
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>上記は、CSSビューポートユニットvwとvhを使用して、タブレットや携帯電話の画面に合わせたレイアウトを実装する方法とサンプルコードです。レイアウト調整作業のお役に立てれば幸いです。
以上がCSS ビューポート ユニット vw および vh を使用して、タブレットやモバイルの画面に適応するレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。