ブートストラップレスポンシブとは何ですか

ブートストラップでは、応答性とは、同じページが異なる画面サイズで異なるレイアウトを持ち、異なる解像度のデバイスと互換性があることを意味します。レスポンシブ Web デザインにより、ユーザーはさまざまなサイズのデバイスで Web サイトを閲覧できます。この効果は、グリッド システムを使用し、行を 12 個の等しいグリッドに分割することによって実現できます。

#このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 5、DELL G3 コンピューター

ブートストラップの応答性とは

レスポンス スタイル レイアウトとは、異なる画面サイズで異なるレイアウトを持つ同じページを指します。これは、異なる解像度のデバイスと互換性があります。

従来の開発方法では、PC 用に 1 つのセットを開発し、PC 用に別のセットを開発します。レスポンシブレイアウトを開発するには十分ですが、CSS が比較的重いのが欠点です。

実装: グリッド システムに依存し、行は 12 個のグリッドに均等に分割され、要素が占めるグリッドの数を指定できます

レスポンシブ Web デザインとは

レスポンシブ Web デザインは、ユーザーがさまざまなサイズのデバイスで Web サイトを閲覧するときに優れた視覚効果を得ることができる方法です。例えば、パソコンのモニターでウェブサイトを閲覧し、次にスマートフォンで閲覧する場合、スマートフォンの画面サイズはパソコンのモニターに比べてはるかに小さいですが、違いはほとんど感じられません。ほぼ同じです。これは、Web サイトのレスポンシブ デザインが素晴らしい仕事をしていることを意味します。

流動的なレイアウトのサンプルには応答性が実装されているので、さまざまな画面サイズで閲覧してみてください。 Chrome または FireFox の Window Resize 拡張機能を使用してブラウザのサイズを変更できます。

レスポンシブ Web デザインの仕組み

レスポンシブ Web デザインを適用するには、さまざまなデバイス サイズに適応するスタイルを含む CSS を作成する必要があります。さまざまなフォントやメディア クエリなどの Web 開発技術を使用してページが特定のデバイスに読み込まれると、最初にデバイスのビューポート サイズが検出され、デバイス固有のスタイルが読み込まれます。

レスポンシブ Web デザインのための CSS の詳細な学習

「bootstrap-sensitive.css」の学習を通じて、「レスポンシブ デザイン」の実装方法を学びます。 。この前に、次のコード行を Web ページの先頭領域に追加する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ビューポートのメタ タグは、デフォルトのビューポートをオーバーライドし、特定のビューポートに関連するスタイルの読み込みに役立ちます。

width 属性は画面の幅を設定します。これには、320 ピクセルを表す 320 や、ブラウザーにネイティブ解像度を使用するように指示する「device-width」などの値が含まれます。

initial-scale プロパティは、ビューポートの初期スケールです。 1.0 に設定すると、デバイスのネイティブ幅がレンダリングされます。

もちろん、以下に示すように、Bootstrap のレスポンシブ CSS を追加する必要があります:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

さて、レスポンシブ CSS ファイルを探すと、いくつかの一般的な宣言の後に次のことがわかります (Line より)番号 10 から 22)、「@media」で始まるさまざまなフィールドがあります。これは、さまざまなデバイスで機能するスタイルを作成する方法です。

最初の領域は「@media (max-width: 480px)」で始まり、最大幅 480 ピクセルのデバイスのスタイルを設定します。

2 番目の領域は「@media (max-width: 767px)」で始まり、最大幅 767 ピクセルのデバイスのスタイルを設定します。

3 番目の領域は「@media (min-width: 768px) および (max-width: 979px)」で始まり、最小幅 768 ピクセルと最大幅 979 ピクセルのデバイスのスタイルを設定します。

次の領域は、最大幅 979 ピクセルのデバイスのスタイルを設定することです。したがって、「@media (最大幅: 979px)」で始まります。

最後の 2 つの領域は、それぞれ「@media (min-width: 980px)」と「@media (min-width: 1200px)」で始まります。前者は、最小幅のデバイスのスタイルを設定します。後者は、最小幅が 1200 ピクセルのデバイスにスタイルを設定します。

したがって、このスタイル シートの基本的な機能は、「min-width」属性と「max-width」属性を使用して、デバイスの最大幅と最小幅に基づいて使用するスタイルを決定することです。

関連する推奨事項:

ブートストラップ チュートリアル

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