CSS はさまざまな解像度を決定し、適応的な幅を実現するためにさまざまな幅のレイアウトを表示します。

1. CSS DIV Web ページ レイアウトでは、解像度が 1024 ピクセル (ピクセル) 以下の場合、DIV レイアウト オブジェクトは幅 1000 ピクセルで表示され、解像度が 1024 ピクセルを超える場合、幅 1200 ピクセルで表示されます。その他の要件。 CSS を使用してブラウザの表示幅を変更すると、Web ページの幅のレイアウトが動的に変更されます (Web ページの幅はブラウザの表示幅に応じて自動的に広くなり、狭くなります)。
開発に伴い、ディスプレイ画面の解像度がますます高くなっているコンピューター ユーザーが増えていますが、一部のユーザーは依然として 1024 ピクセル解像度のディスプレイを使用しています (いくつかのブラウザ解像度統計プラットフォームから取得したデータによると、現在 1200 解像度が使用されています)。ただし、CSS レイアウトを設計するときに少なくとも 1024 ピクセルの解像度のユーザーを考慮する必要があります)。Web ページのレイアウトの幅が 1200 ピクセルに固定されている場合、解像度 1024 のユーザーが Web を閲覧すると、ブラウザの下にスクロール バーが表示されます。この問題、皆さん CSS3 スタイルを使用してユーザーのブラウザ幅を決定し、さまざまなレイアウト幅を呼び出すことができます。

CSS の単語と構文を使用する

コードは次のとおりです:

@media画面と(判定属性){CSSスタイルセレクター}

ここで、変更する CSS スタイル セレクターが中括弧内に含まれていることに注意してください。

2. 異なる解像度で異なる幅のスタイルを表示する例

1. DIVCSS の小さなケースの説明
まず、「.abc」という名前の DIV ボックス CSS を設定し、その高さを 300px に設定し、CSS の境界線を黒に設定し、margin:0 の自動レイアウトを中央に設定します。これら 2 つのスタイルは、見やすくするためにあらかじめ設定されています。
ブラウザを手動でドラッグして幅を表示し、ブラウザの幅が 500 ピクセル以下に調整されると、対応するボックスの幅は 100 ピクセルで表示されます。 901 ピクセル以下に調整されます。「abc」は 200 ピクセルを表示するボックスの幅に対応します。ブラウザの幅が 1201 ピクセルより大きく調整されると、ボックス オブジェクトの幅は 1200 ピクセルで表示されます。1200 ピクセル未満の場合、表示幅は900ピクセル。

2.CSSコード

コードは次のとおりです:

.abc{ 高さ:300px; ボーダー:1px ソリッド #000; マージン:0 自動}
@media screen and (min-width: 1201px) { width: 1200px} }
/* css 注: ブラウザーの幅が 1201 ピクセル以上に設定されている場合、abc は幅 1200 ピクセル*/
@media 画面と (max -width: 1200px) {
.abc {width: 900px}

}
/* ブラウザの幅が1200pxを超えないように設定されている場合 c 900px幅を表示*/
@media screen と (max-width: 901px) {
.abc {width: 200px;}

}
/* の幅が設定されている場合のデバイスは 901 ピクセル以下で、abc は幅 200 ピクセル*/
@media 画面と (最大幅: 500 ピクセル) {
.abc {幅: 100 ピクセル;}
を表示します
}
/* ブラウザの幅が 500 ピクセルを超えないように設定されている場合、abc は 100 ピクセルの幅で表示されます*/

CSS コードは順序があり、CSS は大きいものから小さいものへと入力されていることに注意してください (ブラウザの幅が大きいほど高くなります)。これは論理的な関係によるものであり、@media の判断によるものです。 CSSデバッグを行うと判定が無効になります。

3. HTMLコード

コードは次のとおりです:

< /head>
< ;body>

DIVCSS5 の例: DIV の幅はブラウザの幅に応じて変わります