ウィンドウ単位に基づく組版_html/css_WEB-ITnose

私は以前、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 倍のフォント サイズで 4a249f0d628e2318394fd9b75b4636b1 要素を作成することでした。結果から、これを直接実行することはできないことが確認されました:(

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

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

发生这种情况的原因在于，在计算 4a249f0d628e2318394fd9b75b4636b1 时我使用了基于百分比的 font-size 。当我继承 100db36a723c770d327fc0aef2ce13b1 中的 font-size 重新计算 4a249f0d628e2318394fd9b75b4636b1 中的 font-size 时就会变得十分有效。

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

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

• 在 100db36a723c770d327fc0aef2ce13b1 中 112.5% 计算出的 font-size 大小为 18px ( 112.5/100 * 16px )
• 0.25vw 计算出的值相等于 2px ( 800px * 0.25 ÷ 100 )
• 100db36a723c770d327fc0aef2ce13b1 中计算的 font-size 大小为 20px ( 18px + 2px )

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

我们将采用同样的方式来解决 4a249f0d628e2318394fd9b75b4636b1 的计算。这一次要特别注意 112.5% 的计算。

• 4a249f0d628e2318394fd9b75b4636b1 中 112.5% 计算出来相当于 22.5px 的 font-size 大小( 112.5/100 * 20px )
• 0.25vw 相当于 2px ( 800px * 0.25 ÷ 100)
• 4a249f0d628e2318394fd9b75b4636b1 的 font-size 大小为 49px ( (22.5px + 2px) * 2 )

不幸的是， 我们要寻找的正确的 4a249f0d628e2318394fd9b75b4636b1 大小为 body 的 font-size 大小的两倍或者说是 40px 。他们是不同的 :(

这里有两种方式可以解决这个问题，因为我们知道错误的引起是由于4a249f0d628e2318394fd9b75b4636b1继承了100db36a723c770d327fc0aef2ce13b1的font-size大小。

第一种解决的方法是在 4a249f0d628e2318394fd9b75b4636b1 中将 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; }

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

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

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

这是比较容易回答的。

你有没有注意到视窗单位仅仅适用于设置 100db36a723c770d327fc0aef2ce13b1 元素？其余一切还是使用 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 を作成する
• ブラウザのサポートと潜在的なバグがあるかどうかを確認する

まとめ

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

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

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

Jingzi

現役学生、学部コンピューター専攻。積極的で笑いが大好きな女の子。フロントエンドが大好きで、他の人とコミュニケーションしたり共有したりするのが好きです。自分の心の中の自分を自分の努力で実現したいと思っています。 Weibo: @京-如秋叶