Questo blog dimostrerà il processo di applicazione di query multimediali e punti di interruzione utilizzando l'utilità di overscroll in Tailwind.
Come applicare query multimediali e punti di interruzione con overscroll in Tailwind?
Per applicare i punti di interruzione o il suo altro nome, le query multimediali quando si tratta di CSS con il ' scorrimento eccessivo ' utilità. Viene creato il programma HTML e vengono applicati i diversi punti di interruzione” sm ', ' md ' O ' lg ' con le classi di utilità adatte dall'utilità 'overscroll'. Modifica il comportamento di scorrimento degli elementi su schermi di dimensioni diverse.
Passaggio 1: utilizzare i breakpoint e le media query nel codice HTML
Crea un documento HTML e applica i punti di interruzione che sono le dimensioni dello schermo e le query multimediali per ciascun punto di interruzione. Ad esempio ' md ' E ' lg ' I punti di interruzione vengono utilizzati nel codice seguente per la dimensione del testo e ad esso viene applicato il comportamento di scorrimento eccessivo:
< corpo classe = 'bg-ardesia-500' >
< div classe = 'testo-rosso-900 p-4 lg:p-8' >
< P classe = 'relativo md:assoluto md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none lg:text-xl lg:static lg:translate-x-4 lg :traduci-y-4 ' > Questo testo avrà dimensioni di carattere diverse in base alle dimensioni dello schermo. Esso sarà più piccolo sugli schermi piccoli , medio - dimensioni su schermi medi , e più grandi su schermi di grandi dimensioni. P >
div >
corpo >
In questo codice:
- “ bg-ardesia-500 ” imposta il colore di sfondo su grigio.
- “ testo-rosso-900 ' cambia il colore del testo in rosso.
- “ p-4 ' aggiunge un riempimento di 4px.
- “ lg: p-8 ' aggiunge un riempimento di 8px su schermi di grandi dimensioni.
- La posizione iniziale del “ Il tag ' viene impostato rispetto alla pagina principale utilizzando il tag ' parente ' classe.
- “ md: assoluto ' cambia la posizione del testo da relativa ad assoluta su uno schermo di medie dimensioni.
- “ md:overscroll-contain ' garantisce che il comportamento di 'scorrimento eccessivo' sia contenuto all'interno di quell'elemento invece di influenzare l'intera pagina quando lo schermo è di medie dimensioni.
- “ md:testo-lg ' rende il testo grande su uno schermo di medie dimensioni.
- “ md:translate-x-4 ' E ' md:traduci-y-4 ' sposta il testo ' 4px ' in basso e a destra su schermi di medie dimensioni.
- “ lg:scorrimento eccessivo-nessuno 'imposta il' scorrimento eccessivo ' proprietà di classe su none su uno schermo di grandi dimensioni.
- “ lg:testo-xl ' modifica la dimensione del testo in extra-large per uno schermo di grandi dimensioni.
- “ LG: statico ” cambia la posizione del testo rispetto alla pagina madre da assoluta a statica per uno schermo di grandi dimensioni
- “ lg:translate-x-4 ' E ' lg:traduci-y-4 ' sposta il testo di 4px in basso e a destra su uno schermo di grandi dimensioni.
Passaggio 2: visualizzare l'anteprima dell'output
Ora, visualizza l'anteprima della pagina web creata eseguendo il codice HTML riportato sopra e modifica le dimensioni dello schermo del sito HTML per vedere le modifiche visibili:
Nella schermata sopra, il ' scorrimento eccessivo ' il comportamento è visibile e diminuendo le dimensioni dello schermo si può vedere che la dimensione del testo cambia in base alle query multimediali ad esso applicate.
Conclusione
Per applicare le query multimediali e i punti di interruzione con ' scorrimento eccessivo ', specificare i punti di interruzione con la classe desiderata dall'utilità 'overscroll'. Variando la dimensione dello schermo, le query multimediali regolano l'output dello schermo. Questo blog ha dimostrato il processo di applicazione delle query multimediali e dei punti di interruzione con il comportamento di 'scorrimento eccessivo' in Tailwind.