私は以前、rem と em に基づくレスポンシブタイポグラフィについて書きました。また、モジュラーコンポーネントについても 2 つのブログを書きました。これらの記事では、ウィンドウユニットに関するコメントが必然的に話題になります。

私も計算が本当にめんどくさいので、窓単位を使うことに抵抗を感じていた時期がありました。

先週、私はついにこの困難を乗り越え、ウィンドウユニットとそれをレスポンシブタイポグラフィで使用する方法を探ることにしました。

ウィンドウ単位とその使用方法について説明する前に、まずウィンドウ単位とは何かを理解しましょう。

ウィンドウユニットとは何ですか?

CSS で使用できるウィンドウユニットには現在次の 4 つの主要なタイプがあります:

vw : ウィンドウの幅のパーセンテージ
vh : ウィンドウの高さのパーセンテージ
vmin。 : 現在の小さい vw と vh
vmin : 現在の大きい vw と vh

この場合、 window はブラウザ画面を指します。 1vw はブラウザの幅の 1% を意味します。 100vw はブラウザ全体の幅を意味します。

ウィンドウユニットの優れた点は、 ウィンドウサイズが変更されると、サイズが自動的に再計算 されることです。この現象は、ページの再読み込み時、ページのサイズ変更時、またはページの向きの変更時に発生する可能性があります。

ビューポートの単位は自動的に再計算できるため、常にページの 4 分の 1 を占めるコンポーネントを作成するのは非常に簡単です。

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

ログイン後にコピー

上の画像はウィンドウユニットのミニチュアを示しています。さて、この記事に戻りましょう。

写植にウィンドウ単位を使用する

写植にウィンドウ単位の使用を検討すべきもう 1 つの理由は次のとおりです。 ウィンドウ単位はクライアントのブラウザに従って自動的に再計算されます。これは、メディアクエリのフォントサイズを明示的に宣言する必要がないことを意味します。

これを例で明確に説明しましょう。

フォントサイズを 800 ピクセルの 16 ピクセルから 20 ピクセルに変更した以下のコードを考えてみましょう。

すごい

このコードを見ると、800px ビューポートでサイズを 16px から 20px に変更するように font-size にすぐに指示できます。これは、優れた視覚効果を得るためによく行われることです。

ただし、レイアウトが異なるデバイスでも適切に維持されるように、2 つのブレークポイントに追加のメディアクエリを追加する必要がある状況に遭遇することがあります。

そうですか

複数のメディアクエリを指定し、それに応じて複数のフォントサイズを設定することもできますが、通常はやりすぎなので、フォントサイズは 3 つまたは 4 つに限定します。

しかし、複数のメディアクエリや複数のフォントサイズを指定せずに、異なる状況で同じ効果を得るにはどうすればよいでしょうか?

このとき、ウィンドウ単位が登場しますが、ウィンドウ単位で font-size 属性を設定することで、簡単に同様の効果を得ることができます。

次のコードの結果を考えてみましょう:

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

ログイン後にコピー

すごいと思いませんか?

ただし、ご覧のとおり、ウィンドウ単位は画面サイズの変化にあまりにもよく適応します。

画面幅 320px のデバイス (モバイル) でフォントサイズも 3vw に設定すると、取得されるテキストサイズは 10px になります。フォントサイズが小さすぎて読めなくなりました。一方、画面幅が 1440 ピクセルのデバイス (ラップトップ) では、フォントサイズは 43 ピクセルとなり、これも大きすぎます。

次に、ウィンドウのフォントサイズを調整するという楽しい課題を提示します。

ありがたいことに、それを行う簡単な方法があります。最小フォントサイズを設定し、calc() プロパティを複数回使用することで、小さなビューポートでフォントを拡大縮小できます。

次のコードのようにします:

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

ログイン後にコピー

これはクールだと思いませんか? 私がこの方法を最初に発見したのは、Mike Riethmuller の記事「How to Control Responsive Typography with Precision」でした。

残念ながら、この方法がすべてのブラウザで機能するとは限らないことも承知しています 。たとえば、Mac の Safari (もちろん、Mike は Windows にも適用できると言いました)。

欠陥を修正する方法は非常に簡単です。 vw と組み合わせてパーセンテージを使用すると、Safari でフォントスケーリングも実装できるようになります。

html { font-size: 3vw; }

ログイン後にコピー

Shwweeeet! 実際に、コード内で em 、 rem 、および media クエリの使用をすべて削除することは可能ですか?これに関しては、答えを知るのが待ちきれません！

次に克服しなければならない課題は、ビューポートユニット内の他の文字体裁要素 ( h1 ～ h6 ) でフォントサイズを設定することでした。

他のタイポグラフィック要素をビューポート単位で設定する

最初にやろうとしたのは、本文テキストの 2 倍のフォントサイズで

要素を作成することでした。結果から、これを直接実行することはできないことが確認されました:(

我试着将中的 font-size 大小相乘于 2 ，我发现这比本来的字体大小大了很多:

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

ログイン後にコピー

发生这种情况的原因在于，在计算

时我使用了基于百分比的 font-size 。当我继承中的 font-size 重新计算

中的 font-size 时就会变得十分有效。

这时，如果我们添加一些数字就会变得容易想象一些。

比方说你现在的视窗大小为 800px 。默认的 font-size 大小为 16px 。

在中 112.5% 计算出的 font-size 大小为 18px ( 112.5/100 * 16px )

0.25vw 计算出的值相等于 2px ( 800px * 0.25 ÷ 100 )

中计算的 font-size 大小为 20px ( 18px + 2px )

到目前为止HTML计算是不是很好？太棒了！

我们将采用同样的方式来解决

的计算。这一次要特别注意 112.5% 的计算。

中 112.5% 计算出来相当于 22.5px 的 font-size 大小( 112.5/100 * 20px )

0.25vw 相当于 2px ( 800px * 0.25 ÷ 100)

的 font-size 大小为 49px ( (22.5px + 2px) * 2 )

不幸的是，我们要寻找的正确的

大小为 body 的 font-size 大小的两倍或者说是 40px 。他们是不同的 :(

这里有两种方式可以解决这个问题，因为我们知道错误的引起是由于

继承了的font-size大小。

第一种解决的方法是在

中将 112.5% 设置为 100% :

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

ログイン後にコピー

第二种方法就是确保在元素之间不继承字体的大小。

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

ログイン後にコピー

这两种解决方式都看起来十分变态。因此我不断寻找更好的解决方法。

最终最好的方式就是恢复使用 rem 和 em 。为什么要放弃发现的新单位呢？

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

ログイン後にコピー

既然我们谈到了字体缩放问题，你可能会产生另外一个问题:"使用视窗单位时，垂直规律和模块化会变得怎么样呢？"

好，让我们下面来谈谈他们。

视窗单位与垂直规律和模块化

这是比较容易回答的。

你有没有注意到视窗单位仅仅适用于设置元素？其余一切还是使用 rem 和 em 来设置。

这意味着你仍然可以以同样的方式使用 em 和 rem 单位去创建垂直规律和模块化，就像我之前在我所知道的响应式排版一文中所说的。

什么都没有改变！:)

Oh。在我们结束这篇文章之前还有一件事。

还有一个更大的我不得不克服的问题。就是我之前曾经提出的一个疑问:"在视窗大小为 800px 的情况下你如何计算 vw 使排版的单位大小为 20px ？"

这是一个很长的问题，化简为一个单词就是精度。换句话说，我怎样才可以更精确的使用我想要的字体大小呢？

精度

其实，Mike已经帮我解决了这个问题。现在我只需要解释一下这个公式的工作原理。

让我们说说你想要的结果...

当视窗大小为 600px 时， font-size 大小为 18px
当视窗大小为 1000px 时， font-size 大小为 22px

首先，我们不得不将 font-size ( 18px )转化为百分比。第一部分的计算是这样子的: calc(18/16 * 100%) (或者简单的 calc(112.5%) )

接下来计算 vw 的数量。这部分的计算略微有点麻烦。

你可以通过考虑 font-size ( 22-18 )的差值来计算 vw 的值,除以视窗的宽度( 1000-600 ),之后乘以 100vw - smaller-viewport-width ( 100vw - 600px )。

组合在一起就是:

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

ログイン後にコピー

刚开始的时候这可能有点复杂，但是一旦你知道其中的组成，你就可以简化为Sass中的mixin。

Indrek Paas 已经将上面公式转化为一个简单的Sass mixin 。这里我很开心可以使用百分比而不是像素。

超级精度

这里，你如何实现在不同的断点，获取你想要的视窗单位，从而实现不同的缩放比率。

这里有一个解决方案；

html {  font-size: 100%;  // Scales by 1px for every 100px from 600px to 1000px  @media (min-width: 600px) {    font-size: calc(112.5% + 4 * (100vw - 600px) / 400)  }  // Scales by 0.5px for every 100px from 1000px to 2000px  @media (min-width: 1000px) {    font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000)  }}

ログイン後にコピー

嘿，但是在现实中你不可能使用不同的比率进行缩放！这就意味着你会使用下面这个更加可为的方法:

html {  font-size: 100%;  // Scales by 1px for every 100px from 600px onwards  @media (min-width: 600px) {    font-size: calc(112.5% + 4 * (100vw - 600px) / 400)  }  // Sets font-size to 22px after a viewport of 1000px  @media (min-width: 1000px) {    font-size: calc(137.5%)  }}

ログイン後にコピー

你是不是已经有所领悟。请随时将视窗单位与媒体查询相结合来实现你想要的结果。

现在，可能最重要的问题就是:

実際のプロジェクトではウィンドウユニットを使用する必要がありますか?

おそらく、ウィンドウユニットをまだ使用したことがないので、結論を出すのは難しいです。実際のプロジェクトの前に練習する必要があることがいくつかあります:

vw を計算するための Sass mixin を作成する
ブラウザのサポートと潜在的なバグがあるかどうかを確認する

まとめ

この記事の概要では、学習について説明します。サイズレイアウトにウィンドウ単位を使用する方法。ウィンドウ単位は、ウィンドウが変更されると自動的に再計算されるため便利です。

例の実行中に、要素にのみウィンドウサイズを設定すると、より良い結果が得られることがわかりました。残りのサイズ設定では引き続き em 単位と rem 単位が使用されるため、モジュール性と垂直方向の規則性を簡単に実現できます。

この記事は @Zell の「Viewport Unit Based Typography」に基づいて翻訳されており、翻訳全体に私たちの独自の理解と考えが含まれています。翻訳が適切でない場合、または何か間違っている場合は、業界の友人にアドバイスを求めてください。この翻訳を転載したい場合は、英語の出典を明記してください: http://zellwk.com/blog/viewport-based-typography/。