この記事では、レスポンシブレイアウトの概念、レスポンシブレイアウト、設計概念、特定の実装コードの利点と短所について詳しく説明しています。まれな記事です。ここでは、友人にそれをお勧めします1。レスポンシブレイアウトとは何ですか？
レスポンシブレイアウトは、2010年5月にイーサンマルコットによって提案された概念です。要するに、各端末に特定のバージョンを作成するのではなく、ウェブサイトは複数の端末と互換性があります。
このコンセプトは、モバイルインターネットブラウジングを解決するために生まれました。レスポンシブレイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスとより良いユーザーエクスペリエンスを提供できます。さらに、現在の大画面モバイルデバイスの普及により、それを一般的な傾向として説明することは誇張ではありません。
ますます多くのデザイナーがこのテクノロジーを採用するにつれて、多くのイノベーションだけでなく、いくつかの形成されたモデルも見られます。
2。レスポンシブレイアウトの利点と短所は何ですか？アドバンテージ：さまざまな解像度デバイスに直面した強力な柔軟性
マルチデバイスディスプレイの適応問題をすばやく解決できます
欠点：さまざまな機器、高い作業負荷、低効率と互換性があります
コードは面倒で、隠された役に立たない要素が表示され、負荷時間が増加します。
実際、これは妥協設計ソリューションであり、複数の要因の影響により最良の結果を達成することはできません。
ある程度、ウェブサイトの元のレイアウト構造が変更され、ユーザーの混乱が発生します
3.レスポンシブレイアウトを設計する方法は？1.異なるデバイス間の互換性の問題を解決する方法は？
CSS3のメディアクエリは、この問題を解決できます。
2。メディアクエリはどのような値を取得できますか？
デバイスの幅、デバイス-Heigthは、画面/触覚デバイスを表示します。
ウィンドウの幅と高さをレンダリングし、Hegthは画面/触覚デバイスを表示します。
デバイスのハンドヘルド方向、水平方向または垂直方向（ポートレート| lanscape）およびプリンターなど。
スクリーン比アスペクト-RATIOドットマトリックスプリンターなど。
デバイス比率デバイス - アスペクト-dotマトリックスプリンターなど。
オブジェクトの色またはカラーリストの色、Color-Indexは画面を表示します。
デバイスの解像度
3。構文構造と使用
構文：@mediaデバイス名のみ（選択条件を選択）（選択条件を選択）および（デバイス選択条件）、デバイス2 {srules}
使用法：
a。例1：リンクで@mediaを使用してください：
<link rel = styleSheet type = text /cssメディア=画面と（max-width：480px）、（max-device-width：480px）href = link.css rel = externation nofollow />>>>
上記の場合にのみ、省略し、コンピューターモニターに限定できます。最大幅の最初の条件は、レンダリングインターフェイスの最大幅を指し、2番目の条件max-device-widthはデバイスの最大幅を指します。
b。 StyleSheetに@Mediaを埋め込んだ：
コードをコピーします