Tässä artikkelissa selitetään, kuinka keskeytyskohtaa ja mediakyselyä käytetään yhdessä sijaintiominaisuuden kanssa Tailwindissä.
Kuinka hyödyntää keskeytyspisteitä ja mediakyselyitä sijaintiominaisuuden kanssa?
Katkopisteet ovat keskeisiä tekijöitä äärimmäisen reagoivan suunnittelun luomisessa. Sitä käytetään asettelun mukauttamiseen eri näyttökokoihin. Mediakyselyitä käytetään tiettyjen tyylien soveltamiseen elementteihin näytön resoluutiosta riippuen. Sijaintiattribuuttia voidaan käyttää yhdessä näiden kanssa, jotta tulosteesta tulee optimoitumpi.
Vaihe 1: Sijainti-ominaisuuden käyttäminen keskeytyspisteillä ja mediakyselyillä
Tässä vaiheessa ohjelma lisätään soveltamaan sijainti-ominaisuutta keskeytyskohtiin tai mediakyselyihin valitun ' s ”elementti:
< kehon luokkaa = 'bg-slate-500' >
< div luokkaa = 'teksti-keltainen-300 p-4 lg:p-8' >
< s luokkaa = 'suhteellinen md:absoluuttinen md:teksti-lg md:käännä-x-4 md:käännä-y-4 lg:teksti-xl lg:static lg:translate-x-4 lg:translate-y-4' > Tällä tekstillä on eri fonttikoot näytön koon mukaan. Se on pienempi pienillä näytöillä, keskikokoinen keskikokoisilla näytöillä ja suurempi suurilla näytöillä. < / s >
< / div >
< / kehon >
Tässä koodissa:
- ' bg-slate-500 ” asettaa taustavärin harmaaksi.
- ' teksti-keltainen-300 ” muuttaa tekstin värin keltaiseksi.
- ' p-4 ” lisää 4 pikselin täytteen.
- ' lg: p-8' lisää 8 pikselin pehmusteen suurille näytöille.
- Alkusijainti asetetaan suhteessa pääsivuun käyttämällä ' suhteellinen ”luokka.
- ' md:text-lg ” tekee tekstistä suuren keskikokoisella näytöllä.
- 'md:absolute' muuttaa tekstin paikkaa suhteessa absoluuttiseen keskikokoisella näytöllä.
- ' md:translate-x-4' ja 'md:translate-y-4' siirrä tekstiä 4 kuvapistettä alas ja oikealle keskikokoisella näytöllä.
- ' lg:teksti-xl ” muuttaa tekstin koon erittäin suureksi suurella näytöllä.
- ' lg:staattinen ” muuttaa tekstin sijainnin yläsivun suhteen absoluuttisesta staattiseen suurella näytöllä
- ' lg:translate-x-4 ' ja ' lg:translate-y-4 ” siirrä tekstiä 4 kuvapistettä alaspäin ja oikealle suurella näytöllä.
Vaihe 2: Tarkista lähtö
Esikatsele yllä olevan koodin luomaa verkkosivua ja säädä näytön kokoa nähdäksesi muutoksen seuraavasti:
Voidaan nähdä, että teksti näyttää reagoivan käyttäytymisen keskikokoisilla ja suurilla näytöillä.
Johtopäätös
Jos haluat käyttää keskeytyskohtia ja mediakyselyjä Tailwindissä, käytä keskeytyspistettä ja aseta mediakysely jokaiseen keskeytyskohtaan sekä muuta sijaintiominaisuutta näytön eri keskeytyspisteissä. Oletuserittelyt ovat ' sm ', ' md ', ' lg ”, ja ” xl ”. Tämä blogi on osoittanut, kuinka keskeytyspistettä ja mediakyselyä käytetään sijaintiominaisuuden kanssa Tailwindissä.