レスポンシブ レイアウトの利点と欠点、またそれを設計する方法は何ですか?

レスポンシブ レイアウトといえば、誰もがある程度理解していると思います。レスポンシブ レイアウトは、今年非常に人気の高いデザイン コンセプトです。モバイル インターネットの普及に伴い、さまざまなモバイル デバイスのさまざまなブラウザー解像度と表示効果を解決するために、デザイナーはレスポンシブ レイアウト デザイン ソリューションを提案してきました。今日は、レスポンシブ レイアウトとは何か、レスポンシブ レイアウトのメリットとデメリット、レスポンシブ レイアウトの設計方法 (CSS3 メディア クエリを使用してレスポンシブ レイアウトを実現する) など、レスポンシブ レイアウトについて説明します。

1. レスポンシブ レイアウトとは何ですか?

レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案された概念です。簡単に言えば、Web サイトを端末ごとに特定のバージョンを作成するのではなく、複数の端末と互換性を持たせることができます。このコンセプトは、モバイル インターネット閲覧の問題を解決するために生まれました。

レスポンシブレイアウトは、さまざまな端末のユーザーに、より快適なインターフェースと優れたユーザーエクスペリエンスを提供できます。さらに、大画面のモバイルデバイスの普及により、これは避けられないトレンドであると言っても過言ではありません。ますます多くのデザイナーがこのテクノロジーを採用するにつれて、多くの革新が見られるようになるだけでなく、いくつかの新しいパターンも生まれてきます。

2. レスポンシブ レイアウトの利点と欠点は何ですか?

アドバンテージ：

さまざまな解像度のデバイスに柔軟に対応

マルチデバイスディスプレイ適応の問題を迅速に解決できます

欠点:

さまざまなデバイスと互換性があり、作業負荷が高く、効率が低い

コードが煩雑になり、無駄な要素が隠れ、読み込み時間が長くなります

実際、これは妥協的な設計ソリューションであり、多くの要因により最良の効果を達成することはできません。

ウェブサイトの元のレイアウト構造がある程度変更されたため、ユーザーに混乱が生じる可能性があります。

3. レスポンシブなレイアウトを設計するには?

上記ではレスポンシブ レイアウトとは何かを学びましたが、実際のプロジェクトではどのように設計すればよいでしょうか。以前、Web サイトを設計する際には、さまざまなブラウザーの互換性に悩まされていました。現在では、さまざまなサイズのデバイスに対応する必要があります。どうすれば平静を保てますか? 需要があれば、解決策があります。レスポンシブ レイアウトといえば、CSS3 のメディア クエリについて触れなければなりません。これは優れたもので、使いやすく、強力で高速です... メディア クエリは、レスポンシブ レイアウトを作成するための強力なツールです。このツールを使用すると、さまざまなリッチで実用的なインターフェイスを簡単にすばやく作成できます。次に、メディアクエリについて詳しく見ていきましょう。

1. CSS のメディアクエリとは何ですか?

さまざまなメディア タイプと条件によってスタイル シート ルールを定義します。メディア クエリを使用すると、CSS はさまざまなメディア タイプや同じメディアのさまざまな条件に対してより正確に動作できるようになります。メディア クエリのほとんどのメディア プロパティは、"以上" と "以下" を表現するために min 値と max 値を受け入れます。たとえば、width には min-width と max-width のメディア クエリがあり、HTML や XML だけでなく、CSS の @media ルールや @import ルールでも使用できます。このタグ属性を使用すると、さまざまなデバイス、特に今後広く使用されるようになるモバイル デバイスにリッチ インターフェースを簡単に実装できます。

2. メディアクエリはどのような値を取得できますか？

デバイスの幅と高さは、ディスプレイ画面/触覚デバイスの場合は device-width と device-height です。

レンダリング ウィンドウの幅と高さは、ディスプレイ画面/触覚デバイスの幅と高さです。

デバイスの向き、横向きか横向きか (縦向き|横向き)、プリンターなど。

アスペクト比ドットマトリックスプリンタ等

デバイスのアスペクト比 - ドットマトリックス プリンターなど

オブジェクトの色またはカラーリストの色、カラーインデックスが画面に表示されます。

デバイスの解像度。

3. 文法構造と用法

@メディアデバイス名のみ（選択条件）ではなく（選択条件）かつ（デバイス選択条件）、デバイス 2 {sRules}

例 1: リンクで @media を使用する:

<link rel="stylesheet" type="text/css" media="画面のみ、(最大幅: 480px)、画面のみ、(最大デバイス幅: 480px)" href="link.css"/>

上記の使用法では、 のみを省略できます。これは、コンピューターのディスプレイに限定されます。最初の条件 max-width はレンダリング インターフェイスの最大幅を参照し、2 番目の条件 max-device-width はデバイスの最大幅を参照します。

例 2: スタイルシートに @media を埋め込む:

@media （min-device-width:1024px） および （max-width:989px），screen および （max-device-width:480px），（max-device-width:480px） および （orientation:landscape） （min-device-width:480px） および （max-device-width:1024px） および （orientation:portrait） {srules}

例 2 では、CSS スタイルは、コンピューター モニターの解像度 (幅) が 1024 ピクセル以上 (最大表示幅は 989 ピクセル)、画面幅が 480 ピクセル以下のハンドヘルド デバイス、画面幅が 480 ピクセルで水平 (つまり、地面と平行な 480 次元) に配置されたハンドヘルド デバイス、および画面幅が 480 ピクセル以上 1024 ピクセル未満で垂直に配置されたデバイスに対して設定されています。

上記の例からわかるように、文字はスペースで接続され、選択条件は括弧内に格納され、srules は互換性のある設定のスタイルシートであり、角括弧内に格納されています。 only（特定のデバイスに限定、省略可能）、and（論理積）、not（特定のデバイスを除く）は論理キーワードであり、複数のデバイスはカンマで区切られており、基本的な CSS 構文を継承しています。

4. 使用可能なデバイス名パラメータ:

5. 論理キーワード:

6. 使用可能なデバイス名パラメータ:

7. メディアクエリのテスト

最後に、設計したメディア クエリをテストする必要があります。さまざまなデバイスでのメディア クエリの効果をテストする場合は、ブラウジング ツールを使用して、さまざまなサイズの画面での表示効果を確認できます。ここでは、iPhone などのさまざまなデバイスをシミュレートし、さまざまなサイズの画面の表示効果をカスタマイズできる優れたオンライン ツール Responsivator を紹介します。さまざまなサイズの画面での Web サイトの表示効果を確認するには、URL またはローカル URL (例: http://127.0.0.1/) を入力するだけです。

8. メディアクエリを通じてレスポンシブレイアウトデザインを実装する

さて、メディア クエリとは何かがわかったので、それをレスポンシブ レイアウト デザイン プロジェクトに適用してみましょう。設計の考え方は非常にシンプルです。まず、標準ブラウザで固定幅を定義します（標準ブラウザの解像度が 1024 ピクセルの場合、幅を 980 ピクセルに設定します）。次に、メディア クエリを使用してブラウザのサイズ変更を監視します。ブラウザの解像度が 1024 ピクセル未満の場合は、メディア クエリによってプリセットされたスタイル シートを使用して、ページの幅をパーセンテージに設定します。このようにして、サブページの構造要素はブラウザのサイズに応じて調整されます。同様に、ブラウザの表示領域が特定の値（たとえば 650 ピクセル）に変更されると、ページの構造要素は、Media Query によってプリセットされたカスケーディング スタイル シートに基づいてそれに応じて調整されます。私たちの例を見てみましょう:

/* ブラウザの表示領域が 980px 未満の場合 */

@media スクリーンと (最大幅: 980px) {

#wrap {幅: 90%; マージン:0 自動;}

#コンテンツ {幅: 60%;パディング: 5%;}

#サイドバー {幅: 30%;}

#フッター {パディング: 8% 5%;下部マージン: 10px;}

}

/* ブラウザの表示領域が 650px 未満の場合 */

@media スクリーンと (最大幅: 650px) {

#ヘッダー {高さ: 自動;}

#検索フォーム {位置: 絶対;上: 5px;右: 0;}

#content {幅: 自動; フロート: なし; マージン: 20px 0;}

#サイドバー {幅: 100%; フロート: なし; マージン: 0;}

}

上記を通じて、ブラウザの表示領域の変化を監視でき、それに応じてページ構造要素が変更されます。 もちろん、監視カスケーディングスタイルシートのサイズをさらにいくつか設定して、さまざまなサイズのデバイスに応じてレスポンシブレイアウトを実行することもできます。表示効果を高めるために、CSS プロパティの初期値をフォーマットする必要があることがよくあります。

/* iPhone の Safari で自動フォントサイズ調整を無効にする */

html{

-webkit-テキストサイズ調整: なし;

}

/* HTML5 要素をブロックに設定する */

記事、余談、詳細、図キャプション、図、フッター、ヘッダー、hgroup、メニュー、ナビゲーション、セクション {

表示: ブロック;

}

/* 写真、ビデオなどの適応調整を設定します。*/

画像 {

最大幅: 100%;

高さ: 自動;

幅: auto\9; /* ie8 */

}

.video 埋め込み、 .video オブジェクト、 .video iframe {

幅： 100%;

高さ: 自動;

}

最後に注意すべきことは、ページのヘッダーの間に次の文を追加することです。

<meta name="viewport" content="width=デバイス幅; initial-scale=1.0">

メタビューポート属性は、元のサイズの表示とモバイルデバイス上で拡大縮小するかどうかを設定する宣言です。

パラメータ設定:

幅 – ビューポートの幅

高さ – ビューポートの高さ

initial-scale – 初期スケール

minimum-scale – ユーザーがズームできる最小スケール

最大スケール – ユーザーがズームできる最大スケール

ユーザースケーラブル – ユーザーが手動でスケールできるかどうか

最後に、IE ブラウザがメディア クエリをサポートしていない状況では、メディア クエリ Javascript を使用して解決できます。ページのヘッダーで css3-mediaqueries.js を参照するだけです。例：

<! --［IE 9の場合］>

<script src='/images/loading.gif' data-original=“http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”>

</script> <! [終了]-->

まあ、レスポンシブ レイアウトについては以上です。何か良い追加のコメントや異なる意見がある場合は、私に連絡して、この小さなことについて一緒に話し合うことができます...

出典: Juewei フロントエンド

元のタイトル: レスポンシブ レイアウトの利点と欠点は何ですか? どのように設計しますか?

キーワード: レスポンシブ レイアウト、Web デザイン、ウェブマスター、Web サイト、Web サイトのプロモーション、収益化