Questo articolo spiegherà come utilizzare il punto di interruzione e la query multimediale insieme alla proprietà position in Tailwind.
Come utilizzare breakpoint e media query con la proprietà Position?
I punti di interruzione sono i blocchi fondamentali per la creazione di un design reattivo definitivo. Viene utilizzato per rendere il layout adattabile a diverse dimensioni dello schermo. Le query multimediali vengono utilizzate per applicare stili specifici agli elementi in base alla risoluzione dello schermo. L'attributo position può essere applicato insieme a questi per rendere l'output più ottimizzato.
Passaggio 1: applicazione della proprietà Position con punti di interruzione e media query
In questo passaggio viene inserito il programma per applicare la proprietà di posizione lungo i breakpoint o le media query sul “selezionato” P 'elemento:
< corpo classe = 'bg-ardesia-500' >
< div classe = 'testo-giallo-300 p-4 lg:p-8' >
< P classe = 'relativo md:assoluto md:testo-lg md:traduci-x-4 md:traduci-y-4 lg:testo-xl lg:statico lg:traduci-x-4 lg:traduci-y-4 ' > Questo testo avrà dimensioni di carattere diverse in base alle dimensioni dello schermo. Sarà più piccolo sugli schermi piccoli, medio sugli schermi medi e più grande sugli schermi grandi. < / P >
< / div >
< / corpo >
In questo codice:
- “ bg-ardesia-500 ” imposta il colore di sfondo su grigio.
- “ testo-giallo-300 ' cambia il colore del testo in giallo.
- “ p-4 ' aggiunge un riempimento di 4px.
- “ lg: p-8' aggiunge un riempimento di 8px su schermi di grandi dimensioni.
- La posizione iniziale viene impostata rispetto alla pagina principale utilizzando il pulsante ' parente ' classe.
- “ md:testo-lg ' rende il testo grande su uno schermo di medie dimensioni.
- “md:assoluto” modifica la posizione del testo da relativa ad assoluta su uno schermo di medie dimensioni.
- “ md:traduci-x-4' E “md:traduci-y-4” sposta il testo di 4 pixel in basso e a destra su uno schermo di dimensioni medie.
- “ lg:testo-xl ' modifica la dimensione del testo in extra-large su uno schermo di grandi dimensioni.
- “ LG: statico ” cambia la posizione del testo rispetto alla pagina madre da assoluta a statica su 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: verificare l'output
Visualizza l'anteprima della pagina web creata dal codice sopra e regola le dimensioni dello schermo per vedere la modifica come:
Si può vedere che il testo mostra un comportamento reattivo su schermi di dimensioni medie e grandi.
Conclusione
Per utilizzare punti di interruzione e query multimediali in Tailwind, applica il punto di interruzione e imposta la query multimediale su ciascun punto di interruzione, nonché modifica la proprietà della posizione in diversi punti di interruzione dello schermo. Le suddivisioni predefinite sono ' sm ', ' md ', ' lg ', E ' XL ”. Questo blog ha mostrato come utilizzare il punto di interruzione e la query multimediale con la proprietà position in Tailwind.