Při navrhování responzivního webu se Tailwind Body zlomu ' a ' Mediální dotazy ” hrají klíčovou roli při použití více funkcí, které lze pohodlně přizpůsobit různým velikostem obrazovky. Tyto vlastnosti je třeba specifikovat prostřednictvím různých tříd, např. md (středně velké obrazovky), „lg (velká obrazovka)“ nebo prostřednictvím „@media ” pravidlo, které připojí funkce na základě zadané podmínky.
Tento článek pokrývá následující obsah:
- Jak použít tloušťku zdobení textu s body přerušení Tailwind a dotazy na média?
- Použití tloušťky dekorace textu s body přerušení Tailwind.
- Použití tloušťky dekorace textu s dotazy na média Tailwind.
Jak použít tloušťku zdobení textu s body přerušení Tailwind a dotazy na média?
' Text dekorace Tloušťka “ lze použít pomocí „ text-dekorace-tl ” vlastnost následovaná hodnotou cílové tloušťky v pixelech. Tyto pixely mohou být „ 1px, 2px, 4px nebo 8px “. ' Body zlomu “ se používají k přizpůsobení různých použitých funkcí v souladu s velikostí obrazovky uživatele pomocí „ md (středně velké obrazovky)“, „lg (velká obrazovka) třídy atd. Mediální dotazy “ povolit podmíněné styly implementace založené na sadě parametrů prohlížeče a operačního systému prostřednictvím „@ média “pravidlo.
Příklad 1: Použití tloušťky dekorace textu s body přerušení Tailwind
Tento příklad nastavuje tloušťku dekorace textu v různých bodech pro použití stylu, který se liší podle velikosti obrazovky:
< html >
< hlava >
< meta znaková sada = 'utf-8' >
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1' >
< titul < / titul >
< skript src = 'https://cdn.tailwindcss.com' < / skript >
< / hlava >
< tělo >
< textarea třída = 'podtržení md:dekorace-8 lg:box-decoration-slice text-black text-2xl' id = 'teplota' > Toto je Linuxhint < / textarea >
< / tělo >
< / html >
Podle tohoto fragmentu kódu použijte níže uvedené kroky:
- Nejprve zahrňte cestu CDN, abyste mohli použít funkce Tailwind.
- Poté vytvořte „< textarea >“ a začlenit uvedené úrovně tloušťky dekorace textu na výchozí a střední obrazovky prostřednictvím „ md “ třídy, resp.
- ' text-černý ' a ' text-2xl ” třídy přidělují textu barvu (černá) a velikost písma, tj. 2xl.
Výstup
Z tohoto výsledku lze odvodit, že tloušťka zdobení textu je vhodně přizpůsobena měnící se velikosti obrazovky.
Příklad 2: Použití tloušťky dekorace textu s dotazy na média Tailwind
Symbol „@ média “ se používá v Media Queries k implementaci různých stylů pro různé typy médií/zařízení. Tato konkrétní ukázka používá tyto dotazy na média ke zdobení tloušťky textu na základě zadaného parametru/podmínky:
< html >
< hlava >
< meta znaková sada = 'utf-8' >
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1' >
< titul < / titul >
< skript src = 'https://cdn.tailwindcss.com' < / skript >
< / hlava >
< tělo >
< h1 id = 'teplota' >Toto je Linuxhint< / h1 >
< / tělo >
< / html >
< styl typ = 'text/css' >
#tepl {
text-dekorace: podtržení;
text- zarovnat : střed;
}
@ média ( max- šířka : 550 pixelů ) {
#tepl {
text-decoration-thickness: 4px;
} }
< / styl >
V tomto bloku kódu zvažte níže uvedené metodiky:
- Podobně zahrňte cestu CDN.
- Poté přidejte „< h1 >“ prvek s uvedeným „id“.
- V části kódu CSS v „< styl >“, upravte styl zahrnutého nadpisu.
- Vytvořte také „@ média “ pravidlo, které aplikuje podmínku, že pokud je šířka obrazovky “ 550 pixelů “, tloušťka zdobení textu je nastavena na „ 4 ” pixelů.
- Je to takové, že poté, co šířka obrazovky překročí tento limit, bude text jednoduše podtržen.
Výstup
Tento výsledek znamená, že pravidlo „@media“, tj. dotazy na média, je aplikováno v souladu s šířkou obrazovky.
Závěr
Body přerušení a dotazy na média lze použít s tloušťkou dekorace textu pro zobrazení použitých funkcí v souladu s velikostí obrazovky uživatele pomocí různých tříd, jako je „ md”, “lg “ nebo prostřednictvím „@ média “pravidlo, resp. Druhý přístup je specifikován v „ CSS ” kód, který vyvolá cílový prvek a ozdobí jej na základě nastaveného parametru/podmínky. Tato příručka podrobně popisuje použití tloušťky dekorace textu pomocí Tailwind Breakpoint a Media Queries.