ビューポートに基づく Web ページのレイアウト Units_html/css_WEB-ITnose

モジュール化の構築に関する前の 2 つの記事では、rem & em とレスポンシブ タイポグラフィについて説明しました。記事のコメントでは、ビューポート単位に基づく Web ページのレイアウトについて多くの熱意がありました。想像力の余地が大きい。

ビューポート単位には計算が含まれるため、しばらくの間、仕事でビューポート単位を使用することに抵抗がありました。しかし、つい先週、私は抵抗を克服し、Web レイアウトでのビューポート ユニットの使用法を理解し始めました。ビューポート ユニットとそれが Web ページ レイアウトでどのように機能するかを詳しく説明する前に、まず一般的なビューポート ユニットとは何かを理解しましょう。

ビューポート単位とは何ですか?

CSS 仕様では、次の 4 種類のビューポート単位が使用できます。

• vw — 1vw はビューポート幅の 1% に等しい
• vh — 1vhビューポートの高さの 1% に等しい
• vmin — vw と vh の小さい方
• vmax — vw と vh の大きい方

ビューポート、つまりブラウザの画面サイズ。1vw はブラウザの幅の 1% に等しく、100vw はブラウザ全体の幅です。

ビューポートの単位サイズは、ページの読み込み時、ページのズーム時、またはビューポート サイズの変更に基づいて自動的に計算されます。画面の向きが変わります（横→縦切り替え）。このため、常にビューポートの 4 分の 1 のサイズのコンテナを作成するのは非常に簡単です。

.component {  width: 50vw;  height: 50vh;  background: rgba(255, 0, 0, 0.25)}

Web レイアウトにはビューポート単位を使用します

Web ページのレイアウトにビューポート ユニットを使用する唯一の理由は、ビューポート ユニット サイズがクライアント ブラウザのビューポート サイズに基づいて自動的に計算されるためです。つまり、メディア クエリを通じてフォント サイズを明示的に宣言する必要はありません。デモを使って簡単に説明しましょう。

コードは次のとおりです。ブレークポイントを 800px に設定し、フォント サイズを 16px から 20px に変更します。

// Note: CSS are all written in SCSShtml {  font-size: 16px;  @media (min-width: 800px) {    font-size: 20px;  }}

上記のコードでは、ビューポート サイズが 800px の場合、フォントは 16 ピクセルから 20 ピクセルに変化します。これはレスポンシブ タイポグラフィでは一般的なアプローチです。ページ レイアウトをすべてのデバイスに確実に適応させるために、ブレークポイント間にメディア クエリを追加するという問題が発生することがあります。

html {  font-size: 16px;  @media (min-width: 600px) {    font-size: 18px;  }  @media (min-width: 800px) {    font-size: 20px;  }}

これは機能しますが、より具体的なメディア クエリのルールとフォント サイズが必要です。通常、フォント サイズは 3 ～ 4 が選択されます。

しかし、異なるメディア クエリやフォント サイズ設定で同じ効果を実現するにはどうすればよいでしょうか?

もちろん、それはあります。これがビューポート ユニットの目的です。フォント サイズをビューポート単位で表現できます:

html { font-size: 3vw; }

素晴らしいですね?短いコード部分が適応を実装します。ただし、明らかな欠点もあります。つまり、ビューポートのユニット サイズがデバイス画面のビューポート サイズに基づいて計算されるため、画面の小さなデバイス (幅 320 ピクセルの携帯電話など) ではフォントが小さすぎます。画面が大きいデバイス (幅 1440 ピクセルの携帯電話など) の場合、フォント サイズが非常に大きくなり、読みにくくなります。

さて、私たちが現在直面している興味深い課題は、ビューポート単位の計算におけるさまざまなデバイスのビューポート幅の影響をどのように解決するかということです。簡単な方法は、font-size の最小値を設定し、calc() 属性を使用して小さな画面デバイス上のフォント サイズ値を動的に計算することです。

html { font-size: calc(18px + 0.25vw) }

Mike Riethmuller のドキュメントを参照してください。レスポンシブ タイポグラフィの正確な制御

ただし、すべてのブラウザが calc() のこの計算方法 (px+vw) をサポートしているわけではありません。解決策も非常に簡単です。ブラウザのサポートを向上させるために、パーセントと vw を計算に使用します。

html { font-size: calc(112.5% + 0.5vw) }

克服すべき次の課題は、ビューポート単位を使用することです。 タイポグラフィのフォント サイズを設定するには要素 (h1 ～ h6)。

他の文字体裁要素のフォント サイズをビューポート単位で設定します

まず、bb041777faa1bd58f88330d983d8c2d9 の場合、フォント サイズはパーセンテージに基づいて計算されます。フォントサイズは100db36a723c770d327fc0aef2ce13b1のサイズを継承した後、4a249f0d628e2318394fd9b75b4636b1のフォントサイズが再計算されます。

ビューポートの幅が 800 ピクセルであると仮定すると、デフォルトのフォント サイズは 16 ピクセルです。

HTML 要素の場合、112.5% はフォント サイズが 18 ピクセル (112.5/100) であることを意味します。 * 16px )

• 0.25vw == 2px(800px * 0.25/100)
• したがって、HTML の font-size の最終値は 20px(18px + 2px)
同じ方法で h1 要素のフォント サイズを計算しますが、パーセンテージ (112.5%) の相対計算に特に注意してください:

h1 要素の場合、112.5%つまり、 font-size は 22.5px(112.5/100 * 20px)

• 0.25vw == 2px(800px * 0.25/100)
• つまり、h1 の font-size の最終値はは 49px( (22.5px + 2px) * 2)
これは、h1 要素の font-size を Body のサイズの 2 倍に設定するという元のアイデアに反します。しかし、違いの理由は、h1 が html のフォント サイズを継承していることであることがわかっています。この問題を解決するには 2 つの方法があります。

最初の方法は、単純に 112.5% を 100% に変更することです:

2 番目の方法は、フォント サイズが要素間で継承されないようにすることです:

h1 { font-size: calc((100% + 0.25vw) * 2) }

h1 { font-size: calc((100% + 0.25vw) * 2) }p { font-size: calc((100% + 0.25vw)) }

这两种方式看起来有点 hack，看起来不爽，于是又继续尝试其它方法。最终，最干净的方式是使用 Rem & Em :

html { font-size: calc(112.5% + 0.25vw) }h1 { font-size: 2em; }

既然讲到了字体大小的计算，那接下来的问题是： 视口单位的垂直和标准化计算是怎么样的？

视口单位的垂直和标准化计算

这个相对比较容易回答。不知是否注意到，视口单位常仅被用于 html 元素？其它元素仍用 rem 和 em 作为计算的单位。

这就意味着，你仍然能使用 rem 和 em 用于视口单位的垂直和标准化计算，这和我之前在 Everything I Know about Responsive Typography 一文中讨论的一样。

结束这篇文章之前，最后一个需要谈到的问题是：要怎么样去计算 vw 的值，才能在视口宽度是 800px 时，排版的字体大小为 20px？很多人问到了这个问题，因而，将这个问题简化成一个词就是—精确。换句话说，如何才能字体大小更加精确？

精确

结果是，Mike 已经替我解决了这个问题，我只需要再简单解释下计算方式。

假设你要处理下面两种情况：

• 视口宽度是 600px 时，font-size 是 18px
• 视口宽度是 1000px 时，font-size 是 20px

首先，我们必须将较小的 font-size 值转为百分比。第一部计算是：calc(18/16 * 100%) (或者 calc(112.5%))。 接下来，计算出 vw 值。 这部分的计算略繁琐:

1. 计算 font-size 的最大差值 v1(22-18=4)
2. 用 v1 除以视口宽度的最大差值 v2(1000-600)
3. 将上述结果再乘以 100vw – smaller-viewport-width(100vw – 600)

最终，结果如下：

html {  font-size: calc(112.5% + 4 / 400 * (100vw - 600px) )}

开始接触可能会比较复杂，但是熟悉之后，你可以把它简化成 Sass 混入( simple sass mixin )。

原文参照