ブートストラップレスポンシブレイアウトを実装する方法

レスポンシブ レイアウト:

レスポンシブ デザインは、さまざまな画面解像度の端末で Web ページを閲覧するためのさまざまな表示方法を実現することを目的としています。レスポンシブ デザインを使用すると、携帯電話やタブレットでの Web サイトの閲覧や読書のエクスペリエンスが向上します。画面サイズが異なると、ユーザーに表示される Web ページのコンテンツも異なります。メディア クエリを使用して画面のサイズを検出し (主に幅を検出)、さまざまな CSS スタイルを設定してレスポンシブ レイアウトを実現できます。

レスポンシブ レイアウトを使用して、さまざまなサイズの端末デバイスに Web コンテンツを完璧に表示することで、ユーザー エクスペリエンスが大幅に向上します。ただし、この目標を達成するには、メディア クエリを使用して多くの冗長な記述を行う必要があります。追加のコードにより Web ページ全体のサイズが大きくなり、モバイル デバイスに適用すると重大なパフォーマンスの問題が発生します。

レスポンシブ レイアウトは、企業の公式 Web サイト、ブログ、ニュース情報 Web サイトでよく使用され、複雑な操作を行わずにコンテンツを閲覧することに主眼を置いています。

Bootstrap レスポンシブ レイアウトを使用する

実装方法: 画面の幅をクエリすることで、一定の幅の範囲の Web ページ レイアウトを指定します。

超小型画面 (モバイル デバイス) w<768px

小型画面デバイス 768px ～ 992px 768 <= w <992

中画面 992px ～ 1200px 992 =

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

以下は、超小型の携帯電話画面 (iphone5s) と PC 画面 (>=1200px) を対象とした、ブートストラップ レイアウトを使用したページ (ログイン フォーム インターフェイス) です。 Col-xs-12: 小さい画面は 12 列を占め、col-lg-5: 大きい画面は 5 列を占め、col-lg-offset-3: 大きい画面は 3 列をインデントします。これは比較的単純な例で、タブレットなどの他の画面に適応させたい場合は、col-md-* 属性を追加し、大画面の携帯電話の場合は、col-sm-* 属性を追加できます。

rree

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