アダプティブレイアウトを参照し、異なるサイズの端末装置での新しいWebページ表示の適応設計方法および技術は、異なる端末の複数のセットに対応するためのインタフェースを開発することが望ましいことを忘れることができます。
今私は、スタイル定義体クラスのように簡単でした
次のようにindex.css：
1 / * ページが基準パターン640ピクセル超えない* / 2 @media画面と（MAX-幅：600PX） { 3。 本体{ 4。 背景色：＃13c2c3 ; 5。 } 6。 } 7。 8。 / * 未満の600PX、900pxより大きい背景色との間* / 9。 （最小幅：600PX）@mediaと（最大幅：900px） { 10 本体{ 11。 背景色：黄色 ; 12である } 13れる } 14 15 16 / * ページスタイルは、基準640ピクセル超え* / 17 @media画面と（最小幅：900px） { 18は、 本体{ 19。 背景色：＃1 0041ff ; 20である } 21れます }
私は、外部index.cssのhtmlコードの導入に直接ました
次のようにindex.htmlを：
1 <！DOCTYPE HTML > 2 < HTML > 3 < ヘッドのlang = "EN" > 4 < メタのcharset = "UTF-8" > 5 < タイトル> </ タイトル> 6 < メタ名= "ビューポート" コンテンツ= "幅=デバイス-幅、初期スケール= 1、最大スケール= 1、ユーザスケーラブル= NO " > 7 < リンク のhref = "CSS / 1.css" タイプ= "テキスト/ CSS" REL =" 10 </ ヘッド> 11 < ボディ> 12 13 </ ボディ> 14 </ HTML >
これらは、あなたが直接エディタプレビューにコードをコピーすることができます他に何かわからない場合は、すべての後、効果はすべてが適応完全なソースコードであるページです！！！
次のような権限を外部の導入とセットでもスタイルのCSS、CSSに2ページ以上を入れたくない場合は
。1 <！ - メディアが現在の画面、導入CSSを指定した場合640の最大幅- > 2 < リンク のhref = "CSS / 1.CSS" タイプ= "テキスト/ cssの" REL = "このスタイルシート" メディア= "スクリーンのみ（最大幅：によって640ピクセル）「/> 3 <！ - 最小幅の導入は、CSS 640を超えたときにメディアが、現在の画面を指定- > 4 < リンク のhref =」CSS / 2.css「タイプ=」テキスト/ CSS「のrel =」このスタイルシート「メディア=」のみと画面：「（最小幅640ピクセル幅によります）/>
index.cssそれ未満640ピクセル導入1.cssページファイルを意味し、この方法は、意味を導入見られるべきである以上により、ページファイルが導入さ640ピクセル2.cssよりも大きくなっています。