レスポンシブな Web サイトをデザインする際に、Tailwind は「 ブレークポイント ' そして ' メディアクエリ 」は、さまざまな画面サイズに便利に適応できる複数の機能を適用する上で重要な役割を果たします。これらの機能はさまざまなクラスを通じて指定されます。 「md（中型画面）」、「lg（大型画面）」、または「@media」 」 指定された条件に基づいて機能を追加するルール。
この記事では次の内容について説明します。
- Tailwind ブレークポイントとメディア クエリを使用してテキスト装飾の太さを適用する方法
- Tailwind ブレークポイントを使用してテキスト装飾の厚さを適用します。
- Tailwind メディア クエリを使用してテキスト装飾の太さを適用します。
Tailwind ブレークポイントとメディア クエリを使用してテキスト装飾の太さを適用する方法
” 文字装飾の太さ 」は、「」の助けを借りて適用できます。 テキスト装飾の太さ 」プロパティの後に、ターゲットの厚さの値 (ピクセル単位) を指定します。これらのピクセルは「 1px」、「2px」、「4px」または「8px」 ”。 ” ブレークポイント 」を使用して、ユーザーの画面サイズに応じてさまざまな応用機能を適用します。 「md（中型画面）」、「lg（大型画面）」 」クラスなど。 メディアクエリ 」は、「@」を介してブラウザと OS パラメータのセットに基づく条件付き実装スタイルを有効にします。 メディア ' ルール。
例 1: Tailwind ブレークポイントを使用したテキスト装飾の太さの適用
この例では、さまざまなポイントでテキスト装飾の太さを設定し、画面サイズに応じて異なるスタイルを適用します。
< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< タイトル >< / タイトル >
< 脚本 送信元 = 「https://cdn.tailwindcss.com」 >< / 脚本 >
< / 頭 >
< 体 >
< テキストエリア クラス = 「下線 md:decoration-8 lg:box-decoration-slice text-black text-2xl」 ID = 「温度」 > これは Linuxhint です < / テキストエリア >
< / 体 >
< / html >
このコード スニペットに従って、以下の手順を適用します。
- まず、Tailwind 機能を適用するための CDN パスを含めます。
- 次に、「<」を作成します。 テキストエリア >」要素を使用して、規定のテキスト装飾の太さレベルをデフォルト画面と中画面に組み込みます。 MD ”クラス、それぞれ。
- ” 文字黒 ' そして ' テキスト-2xl 」クラスは、テキストに色 (黒) とフォント サイズ (2xl) をそれぞれ割り当てます。
出力
この結果から、テキスト装飾の太さが、変化する画面サイズに適切に適応していることが示唆されます。
例 2: Tailwind メディア クエリを使用したテキスト装飾の太さの適用
「@」 メディア 」ルールはメディア クエリで利用され、さまざまなメディア タイプ/デバイスにさまざまなスタイルを実装します。この特定のデモでは、次のメディア クエリを使用して、指定されたパラメーター/条件に基づいてテキストの太さを装飾します。
< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< タイトル >< / タイトル >
< 脚本 送信元 = 「https://cdn.tailwindcss.com」 >< / 脚本 >
< / 頭 >
< 体 >
< h1 ID = 「温度」 >これはLinuxhintです< / h1 >
< / 体 >
< / html >
< スタイル タイプ = 「テキスト/CSS」 >
#温度 {
テキスト装飾: 下線;
文章- 整列する ： 中心;
}
@ メディア ( 最大- 幅 :550ピクセル ) {
#温度 {
テキスト装飾の太さ: 4px;
} }
< / スタイル >
このコード ブロックでは、以下に示す方法論を考慮してください。
- 同様に、CDN パスを含めます。
- 次に、「<」を追加します。 h1 >」要素には、指定された「id」が含まれます。
- コードの CSS 部分の「<」内 スタイル >」タグに含まれる見出しのスタイルを設定します。
- また、「@」を作成します。 メディア ” 画面の幅が ” である限り、という条件を適用するルール 550ピクセル ”、テキスト装飾の太さは”に設定されます 4 ”ピクセル。
- 画面の幅がこの制限を超えると、テキストには単に下線が引かれます。
出力
この結果は、「@media」ルール、つまりメディア クエリが画面の幅に従って適用されることを意味します。
結論
ブレークポイントやメディアクエリは文字装飾の太さを適用することができ、「 MD'、'LG 」または「@」から メディア 」のルールをそれぞれ適用します。後者のアプローチは、「 CSS 」ターゲット要素を呼び出し、設定されたパラメータ/条件に基づいて装飾するコード。このガイドでは、Tailwind ブレークポイントとメディア クエリを使用してテキスト装飾の厚みを適用する方法について詳しく説明しました。