レスポンシブレイアウトについて-htmlチュートリアル-php.cn

レスポンシブレイアウトについて

WBOY

リリース： 2016-08-31 08:41:47

オリジナル

1359 人が閲覧しました

レスポンシブレイアウトとは、ウェブサイトが複数の種類の端末に対応できることを意味しますが、端末ごとに特定のウェブページのバージョンを作成する必要はありません。レスポンシブレイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスとユーザーエクスペリエンスを提供できます。大画面のモバイルデバイスの登場に伴い、レスポンシブレイアウトは開発者によって広く使用される WEB テクノロジーになりました。

利点:

異なる解像度のデバイスに直面する際の高い柔軟性

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

短所:

さまざまなデバイスに対応、作業負荷が高く、効率が低い

コードが煩雑、隠し要素や無駄な要素が出てきてロード時間も長くなる

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

Webサイト本来のレイアウト構造をある程度変更しており、ユーザーの混乱を招く可能性があります

レスポンシブレイアウトについて話すとき、メディアクエリと呼ばれる CSS3 のメディアクエリを思い浮かべる必要があります。メディアクエリは、レスポンシブレイアウトを作成するための強力なツールです。豊富で使いやすいインターフェース。

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

使い方と構造

1.リンクで@mediaを使用します

上記の使用法では、コンピュータのモニターに限り、省略可能です。最初の条件の max-width はレンダリングされるインターフェイスの最大幅を指し、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 ) {}

この例では、コンピューターのモニターの解像度（幅）は 1024 ピクセル以上に設定されています（表示される最大幅は 989 ピクセル）。画面幅が 480 ピクセル以下のハンドヘルドデバイス。 480 ピクセルで水平に配置。画面幅は 480 ピクセル以上 1024 ピクセル未満。垂直に配置したデバイスの場合は CSS スタイル。

メディアクエリによるレスポンシブレイアウト

まず標準ブラウザで固定幅を定義し（ブラウザの解像度が1024px、幅が980pxと仮定）、次にメディアクエリを使用してブラウザの解像度が1024px未満の場合のブラウザのサイズ変化を監視し、幅を設定しますMedia Query プリセットスタイルシートを使用してページをパーセンテージで表示するため、サブページの構造要素はブラウザのサイズに応じて調整されます。同様に、ブラウザの表示部分が特定の値に変化すると、ページの構造要素は Media Query によって事前設定されたカスケードスタイルシートに従ってそれに応じて調整されます。

この属性は、ページの

にを追加することもできます。 devices 元のサイズの表示とステートメントを拡大縮小するかどうかを設定します。

パラメータ:

width – ビューポートの幅

Height – ビューポートの高さ

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

minimum-scale – ユーザーがズームできる最小比率

maximum-scale – ユーザーがズームできる最大比率

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

メディアクエリはほとんどのブラウザでサポートされていますが、IE ブラウザなどの少数のブラウザではサポートされていません。これを解決するには Media Query Javascript を使用する必要があります。