ブートストラップでレスポンシブタイプスケールを構築する方法

このチュートリアルは、Bootstrapのタイポグラフィの処理に深く潜り込み、SCSを変更してレスポンシブタイプスケールを作成する方法を示しています。 これにより、すべての画面サイズにわたって読みやすさが保証され、小さなデバイスの特大の見出しが防止されます。

重要な概念：

• カスタマイズ：Bootstrapのタイポグラフィは、SCSSソースファイルを直接編集することでカスタマイズできます。 要素は、htmlおよび-webkit-text-size-adjust: 100%;を使用して、モバイルブラウザーがフォントサイズを自動的にスケーリングできないようにします。 -ms-text-size-adjust: 100%;
レスポンシブタイプスケール：
• レスポンシブタイプスケールを作成するには、タイプスケールマップ、検証関数、およびミキシンを定義して、画面サイズに基づいてフォントサイズを動的に調整します。これにより、一貫した視覚階層が維持されます デフォルト設定：
ブートストラップは、デフォルトで16pxのベースフォントサイズ、1.5ラインの高さ、
• フォントファミリになります。 これらは、カスタムSASS変数ファイルを使用してオーバーライドできます。 読みやすさと階層：'system-ui'レスポンシブタイプスケールは、読みやすさを大幅に向上させ、明確な視覚階層を確立し、ユーザーエクスペリエンスを向上させます。 これは、SASSマップ、検証関数、およびサイズ調整ミキシンを使用してブートストラップで達成されます。
• Bootstrapのデフォルトのタイポグラフィ：

ブートストラップのタイポグラフィを理解するには、SCSSソースを調べる必要があります。 （注：非タイプグラフィースタイルは明確にするために省略されています。）

要素：

要素のスタイル（html）は、主に不要なモバイルブラウザーフォントスケーリングの防止に焦点を当てています：

html_reboot.scss要素：

<code class="language-scss">html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}</code>

要素のスタイル（body）を定義します：

body_reboot.scss、

-

<code class="language-scss">body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left;
}</code>

、および

- 要素：ph1 これらの要素のスタイル（Inh6および）を使用してフォントサイズを定義し、すべての画面サイズにわたって固定された基本的なタイプスケールを作成します。 これらの変数は、カスタムSASSファイルでオーバーライドできます。 .display-1.display-4レスポンシブタイプスケールの作成：

真に応答性の高いタイプスケールを作成するには、SASSを使用して、画面サイズに基づいてフォントサイズを動的に生成します。このアプローチでは、_type.scssを使用します

1. タイプスケールマップ：さまざまなタイプスケールを定義します（たとえば、ゴールデン比に基づいて）。
2. 検証関数：選択されたスケールが有効であることを確認します。
3. ミキシン：見出しとディスプレイクラスのフォントサイズを生成します。

SASSコードには、タイプスケールのマップ、スケール値を検証する関数、および見出しのフォントサイズを生成するミキシンが含まれます（

- h1）およびディスプレイクラス（h6 - .display-1） 。 これらのミキシンは、さまざまなブートストラップブレークポイントで呼び出され、フォントサイズを応答的に調整します。 ルートフォントのサイズ（.display-4）は、メディアクエリを使用して調整して、さまざまな画面サイズにわたってより流動的なタイプスケールを作成することもできます。 html

例（liblantative-完全なSASS実装が必要）：

<code class="language-scss">html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}</code>

結論：

SASSとその機能を活用することにより、ブートストラッププロジェクト内に動的で適応可能なタイプスケールを作成し、すべてのデバイスで最適な読みやすさと一貫した視覚階層を確保できます。 提供されたCodepenの例（元のテキストに含まれるリンク）は、このレスポンシブタイプスケールを実行しています。 特定の設計要件に合わせてスケール値とブレークポイントを調整することを忘れないでください。

以上がブートストラップでレスポンシブタイプスケールを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。