この記事では、次の概要を使用して、Tailwind ブレークポイントとメディア クエリに最小高さと最大高さを適用する手順を説明します。
Tailwind ブレークポイントとメディア クエリで Min-height プロパティを設定するにはどうすればよいですか?
Tailwind は、さまざまな画面サイズに対応するデザインを作成するためのデフォルトのブレークポイントとメディア クエリを提供します。ブレークポイントに提供されたプロパティは、指定された画面サイズが満たされた場合に適用されます。これらのデフォルトのブレークポイントの最小幅は次のように説明されます。
- sm: 最小幅は「640px」です。
- MD: 最小幅は「768px」です。
- lg: 最小幅は「1024px」です。
- XL: 最小幅は「1280px」です。
- 2xl: 最小幅は「1536px」です。
min-height プロパティは、要素の高さの下限を設定します。これは、要素が持つことを許可される最小の高さを指定することを意味します。 Tailwind のブレークポイントで min-height プロパティを使用するには、次の構文が使用されます。
< ディビジョン クラス = 「{ブレークポイントのプレフィックス}:min-h-{値}...」 > < / ディビジョン >
理解を深めるために、上記で定義した構文をデモンストレーションで使用してみましょう。この例では、要素の高さの最小制限が「 MD ” ブレークポイント。これにより、要素の全体の高さが増加します。
< ディビジョン クラス = 「h-48 w-48rounded-md bg-green-500 text-center md:min-h-screen」 >画面を大きくする サイズ 最小高さを大きくするには< / ディビジョン >
上記のコードの説明は次のとおりです。
- ” h-48 ”クラスは、div要素に192pxの高さを提供します。
- ” w-48 ”クラスは、div要素に192pxの高さを提供します。
- ” 丸みを帯びたMD ”クラスはdiv要素に丸い角を与えます。
- ” bg-{色}-{数字} ” クラスは、div 要素の背景に指定された色を提供します。
- ” テキストセンター ” クラスは、テキスト要素を div 要素の中央に配置します。
- ” md:min-h-screen 」クラスでは、画面の高さの 100% に等しい最小高さ制限が増加します。
出力：
出力を見ると、「 MD 」画面サイズが満たされている場合、要素は画面の高さの 100% を取得します。これは、「」の最低高さ制限が原因で発生します。 MD ” ブレークポイントは画面の高さと同じに設定されます。
Tailwind ブレークポイントとメディア クエリで Max-height プロパティを設定するにはどうすればよいですか?
最大高さクラスは、Tailwind の高さプロパティの上限を設定します。これは、要素が持つことができる最大の高さを指定することを意味します。ブレークポイントを使用して最小高さクラスを使用するための構文は次のとおりです。
< ディビジョン クラス = '{ブレークポイント プレフィックス}:max-h-{サイズ}...' > < / ディビジョン >理解を深めるために、上記で定義した構文をデモンストレーションで使用してみましょう。この例では、要素には「」の特定の最大高さ制限が提供されます。 MD ” ブレークポイント。これにより、要素に提供されるデフォルトの高さが絞り込まれます。
< ディビジョン クラス = 「h-96 w-48rounded-md bg-green-500 text-center md:max-h-60」 >画面を大きくする サイズ 最小高さを大きくするには< / ディビジョン >上記のコードでは、要素のデフォルトの高さが「h-96」、つまり 384px で提供されていることに注意してください。ただし、「md」ブレークポイントに到達すると、この高さは「240px」まで狭まります。これは「」によるものです。 MD:max-h-60 ' クラス。
出力：
以下の出力では、画面サイズが「 MD 」ブレークポイントを使用すると、要素の要素の高さが小さくなります。
Tailwind ブレークポイントを使用して最小および最大の高さプロパティを設定する方法は以上です。
結論
Tailwind ブレークポイントとメディア クエリを使用して最大高さのプロパティを設定するには、「 {ブレークポイント プレフィックス}:max-h-{size} ”クラスを使用します。同様に、Tailwind ブレークポイントで最小高さプロパティを設定するには、「 {ブレークポイント プレフィックス}:min-h-{size} ”クラスを使用します。この記事では、Tailwind のブレークポイントとメディア クエリに min-height プロパティと max-height プロパティを適用する手順を説明しました。