HTML5 レスポンシブ レイアウトに関する簡単な説明

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

レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案された概念です。つまり、Web サイトを特定のバージョンごとに作成するのではなく、複数の端末に対応できることを意味します。

このコンセプトは、モバイルインターネットブラウジングを解決するために生まれました。レスポンシブ レイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザー エクスペリエンスを提供することができ、大画面モバイル デバイスの人気が高まっている現在、これは一般的な傾向であると言っても過言ではありません。

このテクノロジーを採用するデザイナーが増えるにつれ、多くの革新が見られるだけでなく、いくつかの形成パターンも見られます。

2. レスポンシブ レイアウトの長所と短所は何ですか?

利点:

異なる解像度のデバイスに対応する場合の高い柔軟性
マルチデバイスのディスプレイ適応の問題をすぐに解決できます
欠点:

さまざまなデバイスと互換性があります。作業負荷が高く、効率が低い
コードが煩雑で、隠れた無駄な要素が表示され、ロード時間が長くなります
実際には、これは多くの要因の影響を受け、最良の結果を達成できない妥協設計ソリューションです
変更されましたウェブサイトのオリジナルのデザインはある程度、レイアウト構造がユーザーの混乱を引き起こす可能性があります

3. レスポンシブなレイアウトを設計するにはどうすればよいですか?

1. 異なるデバイス間の互換性の問題を解決するにはどうすればよいですか? CSS3 の

メディア クエリはこの問題を解決できます。

2. メディアクエリで取得できる値は何ですか?

デバイスの幅と高さ、ディスプレイ画面/触覚デバイスの幅と高さ。

ウィンドウの幅と高さの幅、表示画面/触覚デバイスの高さをレンダリングします。

デバイスの持ち方向、横向きか縦向き（縦向き/横向き）、プリンターなど。

アスペクト比ドットマトリクスプリンターなど

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

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

デバイスの解決

3. 文法構造と使用法

文法: @media デバイス名のみ (選択条件) および (デバイス選択条件) ではなく、デバイス 2 の {sRules}

使用法:

a。例 1: リンクで @media を使用する: 上記の使用法では

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />

only を省略でき、最初の条件 max-width はレンダリング インターフェイスの最大幅を指し、2 番目の条件 max-device を参照します。 - 幅はデバイスの最大幅を指します。

b. スタイル シートに @media を埋め込みます:

[関連する推奨事項]

1. HTML5 モバイル アプリケーション開発 - ビューポートの役割 (画像とテキスト) の詳細な紹介

2. WeChat アプレット ビュー: flex レイアウトの例

3.

HTML5 プログラミング

4.

co を使用して非同期プロセスを処理する小さなプログラム開発のチュートリアルの例