ブートストラップで応答性を実装する方法

モバイル デバイスの普及に伴い、ユーザーがモバイル デバイスを通じて Web サイトを閲覧して優れた視覚効果を得ることができるようにする方法は、避けられない問題となっています。レスポンシブ Web デザインはこれを実現する効果的な方法です。

#レスポンシブ Web デザインは、ユーザーがさまざまなサイズのデバイスで Web サイトを閲覧するときに優れた視覚効果を得ることができる方法です。 (推奨学習: Bootstrap ビデオ チュートリアル )

たとえば、最初にコンピューターのモニターで Web サイトを閲覧し、次にスマートフォンで閲覧するとします。スマートフォンの画面サイズは、通常の Web サイトよりもはるかに小さいです。両方のユーザー エクスペリエンスはほぼ同じであり、この Web サイトがレスポンシブ デザインでうまく機能していることがわかります。

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

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

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

次のコード行を 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">

BootStrap の応答性は、col-(sm /md などのさまざまなコントロールを設定することで、グリッド システムに基づいています。 /ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12) により、さまざまな表示領域でさまざまなレイアウト効果を実現し、応答性の高いレイアウトを実現します。

説明

レイアウトの応答性を高めるために、Bootstrap は 3 つのことを行います:

1. グリッド内の列の幅を変更します。 。

2. 必要に応じて、フローティング要素の代わりにスタック要素を使用します。スタック要素が何なのかまだわからない場合は、w3.org の次のフォームが役立つ場合があります。

ルート要素 (html) はスタック コンテキストのルートを形成し、他のスタック コンテキストは次のとおりです。任意に配置された要素から生成されます (「auto」ではなく「z-index」の計算値を持つ、相対的に配置された要素を含みます)。スタック コンテキストは、それを含むブロックに対して必要ありません。

3. タイトルとテキストを正しくレンダリングします。

Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。

以上がブートストラップで応答性を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。