Durante la progettazione di un sito Web responsivo, Tailwind “ Punti di interruzione ' E ' Domande multimediali ' svolgono un ruolo chiave nell'applicazione di molteplici funzionalità che possono essere adattate comodamente a diverse dimensioni dello schermo. Queste funzionalità devono essere specificate tramite varie classi, ad esempio ' md (schermi di medie dimensioni)”, “lg (schermi di grandi dimensioni)” o tramite il file “@media ' regola che aggiunge le funzionalità in base alla condizione specificata.
Questo articolo tratta i seguenti contenuti:
- Come applicare lo spessore della decorazione del testo con punti di interruzione Tailwind e query multimediali?
- Applicazione dello spessore della decorazione del testo con punti di interruzione Tailwind.
- Applicazione dello spessore della decorazione del testo con le query multimediali Tailwind.
Come applicare lo spessore della decorazione del testo con punti di interruzione Tailwind e query multimediali?
IL ' Spessore della decorazione del testo ' può essere applicato con l'aiuto del ' spessore-decorazione-testo ' seguita dal valore dello spessore target in pixel. Questi pixel possono essere “ 1px”, “2px”, “4px” o “8px ”. IL ' Punti di interruzione ' vengono applicati per adattare le varie funzionalità applicate in base alle dimensioni dello schermo dell'utente utilizzando il pulsante ' md (schermi di medie dimensioni)”, “lg (schermi di grandi dimensioni) ' classi, ecc. Il ' Domande multimediali ' abilita stili di implementazione condizionali basati su una serie di parametri del browser e del sistema operativo tramite '@ media ' regola.
Esempio 1: applicazione dello spessore della decorazione del testo con punti di interruzione Tailwind
Questo esempio imposta lo spessore della decorazione del testo in diversi punti per applicare lo stile che varia in base alle dimensioni dello schermo:
< html >
< Testa >
< meta set di caratteri = 'utf-8' >
< meta nome = 'vista' contenuto = 'larghezza=larghezza-dispositivo, scala-iniziale=1' >
< titolo >< / titolo >
< sceneggiatura src = 'https://cdn.tailwindcss.com' >< / sceneggiatura >
< / Testa >
< corpo >
< textarea classe = 'sottolineato md:decorazione-8 lg:box-decorazione-fetta testo-testo nero-2xl' id = 'temp' > Questo è Linuxhint < / textarea >
< / corpo >
< / html >
Secondo questo snippet di codice, applica i passaggi indicati di seguito:
- Innanzitutto, includi il percorso CDN per applicare le funzionalità Tailwind.
- Quindi, crea un '< textarea >' e incorporare i livelli di spessore della decorazione del testo indicati nelle schermate predefinite e medie tramite l'elemento ' md 'classe, rispettivamente.
- IL ' testo-nero ' E ' testo-2xl Le classi assegnano rispettivamente il colore (nero) e la dimensione del carattere, ovvero 2XL, al testo.
Produzione
Da questo risultato si può dedurre che lo spessore della decorazione del testo viene adattato in modo appropriato alle diverse dimensioni dello schermo.
Esempio 2: applicazione dello spessore della decorazione del testo con le media query Tailwind
IL '@ media ' viene utilizzata nelle Media Queries per implementare vari stili per diversi tipi/dispositivi multimediali. Questa particolare dimostrazione utilizza queste query multimediali per decorare lo spessore del testo in base a un parametro/condizione specificato:
< html >
< Testa >
< meta set di caratteri = 'utf-8' >
< meta nome = 'vista' contenuto = 'larghezza=larghezza-dispositivo, scala-iniziale=1' >
< titolo >< / titolo >
< sceneggiatura src = 'https://cdn.tailwindcss.com' >< / sceneggiatura >
< / Testa >
< corpo >
< h1 id = 'temp' >Questo è Linuxhint< / h1 >
< / corpo >
< / html >
< stile tipo = 'testo/css' >
#temp {
decorazione del testo: sottolineatura;
testo- allineare : centro;
}
@ media ( massimo- larghezza :550px ) {
#temp {
spessore della decorazione del testo: 4px;
} }
< / stile >
In questo blocco di codice, considera le metodologie fornite di seguito:
- Allo stesso modo, includi il percorso CDN.
- Quindi, aggiungi un '< h1 >' elemento avente l''id' dichiarato.
- Nella parte CSS del codice, all'interno del simbolo “< stile >', dare stile all'intestazione inclusa.
- Inoltre, crea il '@ media ' regola che applica una condizione tale che finché la larghezza dello schermo è ' 550px ', lo spessore della decorazione del testo è impostato su ' 4 'pixel.
- È tale che quando la larghezza dello schermo supera questo limite, il testo verrà semplicemente sottolineato.
Produzione
Questo risultato significa che la regola '@media', ovvero le Media Queries, viene applicata in base alla larghezza dello schermo.
Conclusione
I breakpoint e le media query possono essere applicati con lo spessore della decorazione del testo per visualizzare le funzionalità applicate in base alle dimensioni dello schermo dell'utente utilizzando varie classi come ' md', 'lg ' o tramite '@ media ' regola, rispettivamente. Quest’ultimo approccio è specificato nel “ CSS ' codice che richiama l'elemento di destinazione e lo decora in base al parametro/condizione impostato. Questa guida illustra come applicare lo spessore della decorazione del testo con Tailwind Breakpoint e Media Queries.