このタイトルを見たとき、レスポンシブ高さデザインという別のタイプミスがあるのではないかと思うかもしれません。本気ですか？ 「レスポンシブ Web デザイン」では通常、複数の幅とデバイス サイズでブラウザーがチェックされるためです。 通常、水平方向の応答性は幅を小さくすることで調整しますが、ブラウザの高さを小さくすることで垂直方向の応答性を考慮しているのはほとんど見かけません。 この時点で、Zhimimi の心の中には次のような疑問が生じているかもしれません。ブラウザの高さを低くする必要があるでしょうか? はい、それについて話し続けましょう。
ウェブサイトをデザインするとき、実際のデータに頼らずに仮説を立てるのは良くありません。水平テストと垂直テストの責任も非常に重要です。
デザイナーにとって、無理な思い込みはWebサイトのデザインを台無しにする重要な要素の1つです。たとえば、ユーザーが画面の幅と高さ全体を使用して Web サイトを閲覧する必要があると考えるのは誤りです。代わりに、最悪のシナリオを考慮する必要があります。
志美、わかりますか？現実には、すべてのユーザーが私たちが期待する方法でブラウザを使用しているわけではありません。 ブラウザの高さを低くすると、Web サイトの見栄えが悪くなります。
ビューポートの高さを変更する方法は、ブラウザーのサイズを（垂直方向に）変更することだけではありません。ブラウザーの DevTools を開くと、ブラウザーの高さも占めます。
上の画像の矢印の領域は、現在のビューポートの高さを表します。ラップトップの画面が小さい場合、Web ページのごく一部しか表示されません。
本当の疑問は、ビューポートの高さが小さい場合にユーザー エクスペリエンスを向上させることができるかということです。 はい、可能です、見てみましょう。
デザイナーや開発者として、デザインの幅の変更のみに注目し、ビューポートの高さの変更を無視する人もいます。たとえば、開発では、UI はさまざまなビューポート幅にわたって特定のコンポーネントのバリエーションを提供します。 しかし、ビューポートの高さが異なる場合はどうなるでしょうか?
上の画像には、ビューポートの高さに基づいて調整されるナビゲーション メニューがあります。 。ビューポート サイズが小さい場合 (iPhone 5 など)、ナビゲーション項目は 2 列のグリッドとして表示されます。この考え方は、誰かがそうするべきだと言うまで放棄されるか、最適化されることがよくあります。
CSS で上記の要件を達成するには、2 つの異なる方法があります。
垂直メディアクエリビューポートユニットZhimimi は、CSS で幅メディア クエリを使用する方法を確実に知っています。
@media (min-width: 700px) { .element { /* 何かをします.. */ }}あまり一般的ではありませんが、ビューポートの高さをチェックする垂直メディア クエリがあります。
@media (min-height: 500px) { .element { /* 何かをします.. */ }}/* または */@media (方向: 横向き) { .element { /* 何かをします.. */ }}ビューポート ユニットを使用すると、ユーザー エクスペリエンスが向上します。 たとえば、ビューポートの高さに基づいて要素間の垂直方向の間隔を制御します。
.hero__title { margin-bottom: calc(10px + 5vh);}
上に示したように、大きな画面 (iMac 27 インチなど) では、下の余白が非常に大きくなります。過剰なマージンの問題を解決するには 2 つの方法があります。
メディアクエリCSS比較機能最初の方法 (メディア クエリ) がよりサポートされています。 画面が大きい場合は、下マージンの最大値を設定する必要があります。
@media (min-width: 2200px) { .hero__title { margin-bottom: 40px; }もう 1 つの方法は、CSS のクランプ() 比較関数を使用することです。クランプ() 関数の機能は、値の範囲を返すことです。
.hero__title { margin-bottom: クランプ(10px, 5vh, 40px);}この例では、タイトルとイラストのセクションを含むセクション領域があり、セクションの高さはビューポートの高さの 100% に等しくなります。
ビューポートの高さが小さくなるまでは、すべて問題なく見えます。セクションの高さは、イラストやテキストのコンテンツを収容するのに十分ではありません。したがって、ページ上の他の部分と重なってしまいます。
図が以下のセクションとどのように重なっているかに注目してください。 これは、垂直方向のスペースが十分にあるために発生します。 HTMLとCSSを見てみましょう。
<p class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- コンテンツ --></p> <img class="hero__thumb" src="figure.png" alt="" /> </p></p>css
.hero {高さ: 100vh;}.hero__thumb {フレックス: 0 0 550px;}このような問題を解決するためのいくつかの解決策を次に示します。
イラストに幅だけではなく固定サイズ（幅と高さ）を設定すると、高さが不足すると引き続きこの問題が発生します。 height: ビューポートの高さが 700px より大きい場合のみ 100vh (メディア クエリの値はコンテキストによって異なる場合があります)。2 つを組み合わせて、より強力なソリューションを得ることができます。
.hero__thumb { width: 400px; height: 300px; object-fit: contain; /* 画像の圧縮を避けるため */}@media (min-height: 700px) { .hero { height: 100vh }さて、垂直メディア クエリを使用する方が良いということに同意しました。ただし、100vh を使用するのは危険です。イラストのサイズを制限しても、テキスト コンテンツでは同じことができない可能性があるためです。テキストの内容が長くなると、同じ問題が再び発生します。次の図を参照してください。
この問題を解決するには、高さの代わりに min-height を使用します。 こうすることで、コンテンツが長くなると高さが広がり、重なり合わなくなります。
@media (最小高さ: 700px) { .hero { 最小高さ: 100vh }}スクロール中にタイトルを固定することは悪いことではありませんが、エクスペリエンスを良好にするために、垂直方向のスペースが十分にある場合にのみタイトルを固定するようにしたいと考えています。
これは風景に関する Web サイトです。ここでは、高さが小さすぎると、固定された高さが全体として多くのスペースを占めることがわかります。これはユーザーにとって本当に重要ですか? 平均的なユーザーはこのような Web サイトを見るためにズームアウトしないため、ほとんどの場合、重要ではありません。現時点では、最適化したい場合は、垂直メディアクエリを使用して、高さが一定の高さ未満であると判断された場合に、固定配置を静的配置に変更することができます。
@media (min-height: 700px) { .site-header { /* 位置: 固定 または 位置: スティッキー */ }}Twitter.com のナビゲーション バーでこのパターンに気づきました。このアイデアは、垂直メディア クエリを Priority+ パターンと組み合わせるというものです。
ビューポートの高さのサイズが変更されると、重要度の低い要素 (ブックマークやリスト) が削除され、[その他] メニューに追加されます。これは、垂直方向のメディア クエリに適した使用例です。
.nav__item--secondary { 表示: なし;}@media (最小高さ: 700px) { .nav__item--secondary { 表示: ブロック }}Web サイトにサイドバーまたはサイドバーがある場合、ビューポートの高さが小さい場合、一部のナビゲーション項目間の垂直方向の間隔を減らすことができ、全体のデザインも向上します。
モーダル ボックスは少なくとも水平方向の中央に配置する必要があることがわかっています。ただし、場合によっては垂直方向の中央に配置する必要がある場合もあります。通常は次の解決策を使用します。
.modal__body { 位置: 左: 50%; 変換: 幅: 500%;}
ただし、コンテンツが長くなると、モーダルが画面の縦方向にいっぱいになり、ユーザーがスクロールできなくなるという問題があります。
この状況にはいくつかの理由が考えられます。
モーダル ボックスには高さがなく、モーダルは垂直方向の中央に配置されます (これにより、問題がより早く発生します)修復されたCSSは次のとおりです。
.modal__body { 位置: 左: 50%; 変換: 幅: 200 ピクセル; 最大高さ: 500 ピクセル; (最小高さ: 700px) { .modal__body { トップ: 50%; 変換: 変換(-50%, -50%);min-height と max-height を使用したことに注意してください。 min-height は、コンテンツが短くてもモーダルの見栄えを保つことを目的とし、max-height は、固定の高さを追加するのではなく、特定の値を使用して高さを制限することを目的としています。
エクスペリエンスをデザインするときは、幅と高さの観点から考えるのが最善です。ブラウザの縦方向のサイズを変更するのは少し奇妙かもしれませんが、利点もあります。この記事では、垂直テストの重要性と垂直テストの実施方法について説明します。最後に、smartmi ユーザーに役立つと思われるいくつかの例と使用例を提案します。
上記はレスポンシブ Web ページの高さのデザインについてです。ブラウザの高さを下げる必要がありますか?詳細については、このサイトの他の関連記事にも注目してください。