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

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

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

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

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

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

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

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

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

1.

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

例:

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

2 . @import を使用して

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

3 をインポートします。これは最も一般的に使用されます: リンク接続を使用し、メディア属性を使用してクエリ メソッドを設定します:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3。その他の注意点

1. 絶対幅は使用しないでください

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

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

rem を使用してください。

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%;}

このコード行は、Web ページに埋め込まれているほとんどのビデオにも有効なので、次のように記述できます:

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

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