CSS のシンプルなレスポンシブ実装

1. Web ページの幅の自動調整を許可する

まず、Web ページのコードの先頭にビューポート メタ タグの行を追加します。

viewport は、Web ページのデフォルトの幅と高さです。上記のコード行は、Web ページの幅がデフォルトで画面の幅と等しく (width=device-width)、元の拡大縮小率 (initial-scale=1) は 1.0 です。つまり、Web ページの初期サイズは画面領域の 100% を占めます。

IE9 を含むすべての主要なブラウザーがこの設定をサポートしています。古いブラウザ (主に IE6、7、8) の場合は、css3-mediaqueries.js を使用する必要があります。

2. CSS3 メディア クエリを使用します @media query

メディア クエリを表現するには 3 つの方法があります:

1.

# をCSS ファイル ##@メディア タイプと (条件 1) と (条件 2){css スタイル}

@media screen and (max-width:980px ) { body{ background-color: red; } }

@import url("css/moxie.css") all and (max-width:980px);

##Web ページは画面幅に合わせてレイアウトを調整するため、絶対幅のレイアウトは使用できません。絶対幅を持つ要素を使用します。これは非常に重要です。具体的には、CSS コードではピクセル幅 (width: xxx px) を指定できません。指定できるのは、幅のパーセンテージ (width: xx%; または width: auto;

2) のみです。相対サイズのフォント

pxの代わりに、CSS の一般的なフォント単位は px、em、rem、%

3 です。 流体グリッド

"フロー「レイアウト」とは、各ブロックの位置が固定されず、浮動していることを意味します。

.main {float: right;width: 70%;} .leftBar {float: left;width: 25%;}

float の利点は、幅が小さすぎて 2 つの要素に収まらない場合、次の要素が自動的に前の要素の一番下までスクロールし、水平方向にオーバーフロー (オーバーフロー) しないことです。水平スクロールバーの外観。

さらに、絶対位置決め (位置: 絶対) を使用する場合は十分に注意する必要があります。

4. アダプティブ画像 (流動画像)

「アダプティブ Web デザイン」では、レイアウトとテキストに加えて、画像の自動スケーリングも実装する必要があります。

これに必要な CSS コードは 1 行だけです:

img { max-width: 100%;}

img, object { max-width: 100%;}

古いバージョンの IE Max-width はサポートされていないため、次のように記述する必要があります:

img { width: 100%; }

さらに、Windows プラットフォームで画像を拡大縮小すると、画像の歪みが発生する可能性があります。現時点では、IE 独自のコマンド

img { -ms-interpolation-mode: bicubic; }

または Ethan Marcotte の imgSizer.js を使用してみてください:

addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("i mg"); imgSizer.collate(imgs); });

推奨学習:

以上がCSS のシンプルなレスポンシブ実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。