CSS ビューポートの単位 vmin および vmax を使用して、画面サイズに基づいて行の高さを調整するためのヒント

CSS ビューポート ユニット vmin と vmax を使用して、画面サイズに応じて行の高さを調整する手法を実現します

現在、モバイル デバイスの普及率は高まり、ユーザー エクスペリエンスを向上させるために、Web デザインには優れた応答性の高いレイアウトが必要です。レスポンシブデザインを行う場合、画面サイズに合わせて行の高さをどう調整するかという問題がよく発生します。幸いなことに、CSS ビューポートの単位 vmin と vmax は、この目標の達成に役立ちます。

vmin 単位と vmax 単位は、それぞれ、ビューポートの幅または高さを基準にして計算された一連の長さ単位を指定します。 vmin は、ビューポートの幅と高さの小さい方の長さの値を指定します。 vmax は、ビューポートの幅と高さの大きい方を指す長さの値を指定します。

複数行のテキストを含むページがあるとします。ビューポートの幅または高さが変更されたときにテキスト行の高さを自動的に調整したいとします。以下に、実装手順と対応するコード例を示します。

まず、ベース値を設定する必要があります。ビューポートの幅または高さが 100vmin の場合、行の高さは 1vmin に設定されます。このようにして、ビューポートの幅または高さが 100vmin 以下の場合、行の高さがビューポートの幅または高さを超えないようにすることができます。

html, body {
高さ: 100%;
マージン: 0;
パディング: 0;
}

.container {
高さ: 100vh; / コンテナの高さをビューポートの高さに設定します /
}

.text {
font-size: 1.5rem;
line-height: 1vmin; / 行の高さを 1vmin に設定します /
}

次に、コンテナに複数行のテキストを含めて、コンテナの高さをビューポートの高さに設定します。テキスト これによりコンテナが完全に満たされます。同時に、テキストの読みやすさを確保するために、テキストのフォント サイズも 1.5​​rem に設定しました。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus vertibulum diam, quis commodo ipsum sagittis eu.

Nulla laoreet mollis nisi, id interdum mi commodo quis. Sed semper magna id vehicula pellentesque.

Nunc ex nibh, feugeat at felis quis, ullamcorpervestibulum elit. Nam vitae turpis et dui accumsan faucibus.

上記のコードでは、画面サイズに合わせて行の高さを調整する操作が完了しました。異なるビューポート サイズでは、テキストの行の高さは現在のビューポート サイズに応じて拡大縮小されます。

vmin と vmax はビューポート サイズに関連して計算されるため、これらの単位を使用する場合は、要素の過度の拡大または縮小を避けるために注意が必要であることに注意してください。さらに、ブラウザごとにビューポート サイズの計算方法が異なる場合があるため、実際の使用方法は若干異なる場合があります。

要約すると、CSS ビューポート単位 vmin および vmax を使用すると、画面サイズに応じて行の高さを調整するのに便利です。行の高さを動的に調整することで、より柔軟で適応性のあるレスポンシブなデザインを実現できます。この技術により、さまざまなモバイル デバイスでのユーザー エクスペリエンスが向上し、Web ページがさまざまな画面サイズに適応できるようになります。

以上がCSS ビューポートの単位 vmin および vmax を使用して、画面サイズに基づいて行の高さを調整するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。