CSS での最小幅 min-width 属性と最大幅 max-width 属性の使用方法をまとめます。-CSSチュートリアル-php.cn

CSS での最小幅 min-width 属性と最大幅 max-width 属性の使用方法をまとめます。

伊谢尔伦

リリース： 2017-06-03 10:06:31

オリジナル

6958 人が閲覧しました

CSS の幅属性は単語の幅であり、幅 width には、最大幅属性 max-width と最小幅属性 min-width という 2 つの重要な属性が含まれます。 max-width 属性 (max-width) は、表示幅の最大値を定義するために使用されます。ブラウザの境界線がドラッグされて表示範囲が最大幅よりも大きくなった場合、要素は、幅の表示で定義された幅を表示します。幅の最大値。最大幅属性値では、自動値、長さ値、パーセント値の 3 つの属性値を使用できます。最小幅属性 (min-width) は、ドラッグ時に幅表示の最小値を定義するために使用されます。ブラウザの境界線の表示範囲が最小幅より小さい場合、要素は最小幅値で定義された幅を表示します。最小幅属性では、自動値、長さ値、パーセント値の 3 つの属性値を使用できます。この記事では、max-width と min-width という 2 つの属性の使用法を要約します。

CSS での最小幅 min-width 属性と最大幅 max-width 属性の使用方法をまとめます。

min-width 属性と max-width 属性の使用1.

IE6 の min-width と min-height と互換性があります

サイトがワイドスクリーンの場合は、左右にドラッグしてブラウザのウィンドウとウェブサイトの幅はウィンドウのサイズに応じて変化します。ブラウザのウィンドウの幅がある程度縮小されると、下のスクロールバーが表示され、ウェブサイトの幅は縮小されなくなることがわかります。 simple function CSS の min-width を使用すると簡単に実現できますが、残念ながら、多くのユーザーが使用している IE6 はこの便利な属性をサポートしていません。次の CSS を追加するだけで済みます。 Web デザイン中に問題を解決するためのステートメントを作成します。

2. @media 属性と (max-width:) および (min-width) の関係と使用法を詳しく説明します

width/height はページの表示領域の幅/高さを定義します出力デバイス内で。

max/min-width/height は、出力デバイスのページの最大/最小表示領域の幅/高さを定義します。

device-width/height は、出力デバイスの表示画面の幅/高さを定義します。

max/min-device-width/height は、出力デバイスの画面の最大/最小の表示幅/高さを定義します。

CSS レイアウト学習メモ - max-width

ブロックレベルの要素の幅を設定すると、要素がコンテナーを左から右に埋め尽くすのを防ぐことができます。次に、左右のマージンを自動に設定して、水平方向の中央に配置できます。要素は指定した幅を占め、残りの幅は左右の 2 つのマージンに分割されます。

唯一の問題は、ブラウザウィンドウが要素の幅より狭い場合、ブラウザはページに合わせて水平スクロールバーを表示することです。

この場合、width の代わりに max-width を使用すると、ブラウザーはウィンドウが小さい状況をより適切に処理できるようになります。

jQuery は画像のスケーリングを実装しており、IE では max-width と互換性がないため、Web ページの画像を処理するとき、特に一部の画像リストアプリケーションでは、画像が適切であることを確認することが困難です。画像サイズを直接設定すると、画像が伸びたりぼやけたりすることがあります。この記事で紹介するコードは、画像の読み込み後に画像サイズを自動的に調整します。 Max-width と max-height は IE6 では互換性がありません。これらの問題は jQuery を使用して解決できます。

5. IE6 に min-width の最小幅をサポートさせよう

この方法を使用してコンテナの最小幅を実現する場合、多くの人がしばしば不可解なクラッシュに悩まされると思います。必要な点は次の 2 つです。 1. IE6 の標準モードと quirk モードでは、ビューポートを表す要素が異なります。前者は、後者はです。モードが異なると、内容がオーバーフローして代入判定が無限ループになる場合の表現が異なります。