html5/css3 レスポンシブレイアウトの概要_html/css_WEB-ITnose

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

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

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

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

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

利点:

異なる解像度のデバイスに対応できる柔軟性が高く、マルチデバイスのディスプレイ適応の問題をすぐに解決できます

欠点:

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

コードが煩雑で、隠れた無駄な要素が表示され、ロード時間が長くなります

実際、これは妥協的な設計ソリューションであり、多くの要因の影響を受け、最高の結果を達成することはできません結果

ある程度変更されました ウェブサイトの元のレイアウト構造はユーザーに混乱を引き起こします

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

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

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

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

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

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

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

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

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

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

デバイス解決

3. 構文構造と使用法

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

使用法:

a。例 1: リンクで @media を使用します:

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

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

@media (min-device-width:1024px) および (max-width:989px)、screen および (max-device-width:480px)、(max-device) -width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

コンピューターのモニターの解像度を設定します (幅) 1024 ピクセル以上 (最大表示幅は 989 ピクセル)、画面幅が 480 ピクセル以下で、横向きに配置されたハンドヘルド デバイス (つまり、地面に対して 480 次元)。画面幅 480px 以上 1024px 未満で垂直に配置されたデバイス用の CSS スタイル。 Responsiveレイアウトを実装します。

width – ビューポートの幅

height – ビューポートの高さ

initial-scale – 初期のスケーリング率

minimum-scale – ユーザーが設定する最小の比率ズーム許可

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

user-scalable – ユーザーが手動でスケールできるかどうか

–>

。ページの先頭で css3-mediaqueries.js を引用する必要があります –> ;