Tämä kirjoitus havainnollistaa menetelmää käyttää reagoivia keskeytyskohtia Tailwind CSS:ssä.
Kuinka käyttää reagoivia keskeytyspisteitä Tailwindissä?
Jos haluat käyttää responsiivisia keskeytyskohtia Tailwindissä, käytä reagoivia määritteitä, kuten ' sm ”, “ md ”, “ lg ”, “ xl ' ja ' 2xl ” HTML-ohjelman muiden luokkien kanssa. Tarkastele sitten HTML-verkkosivua ja muuta näytön kokoa varmistaaksesi, että keskeytyskohdat toimivat oikein.
Vaihe 1: Käytä reagoivia muokkauksia HTML-ohjelmassa
Tee HTML-ohjelma ja käytä responsiivisia muuntajia haluamallasi tyylillä. Olemme esimerkiksi käyttäneet ' sm ”, “ md ”, “ lg ”, “ xl ' ja ' 2xl ” reagoivat muokkaimet:
< kehon >
< div luokkaa = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 luokkaa = 'text-7xl text-white text-center p-20' > Linux-vinkki < / h1 >
< / div >
< / kehon >
Tässä:
- ' bg-fuksia-400 ”-luokka asettaa taustavärin fuksiaan.
- ' sm:bg-pinkki-600 ” luokka soveltaa vaaleanpunaista väriä pienten näyttöjen taustaan.
- ' md:bg-green-700 ” luokka muuttaa taustavärin vihreäksi keskikokoisilla näytöillä.
- ' lg:bg-violetti-50 ” luokka asettaa taustavärin violetiksi suurille näytöille.
- ' xl:bg-teal-600 ” luokka soveltaa sinivihreää väriä erittäin suurien näyttöjen taustaan.
- ' 2xl:bg-keltainen-500 ” luokka muuttaa taustavärin keltaiseksi 2xl-näytöillä.
Vaihe 2: Tarkista lähtö
Tarkastele HTML-verkkosivua ja tarkista, toimivatko reagoivat keskeytyskohdat oikein vai eivät:
Yllä olevalla verkkosivulla voidaan havaita, että verkkosivun väri muuttuu näytön koon mukaan, jonka mukaan keskeytyskohdat määritettiin.
Johtopäätös
Jos haluat käyttää responsiivisia keskeytyskohtia Tailwindissä, käytä reagoivia määritteitä, kuten ' sm ”, “ md ”, “ lg ”, “ xl ' ja ' 2xl ” HTML-ohjelman muiden luokkien kanssa. Näitä muokkaajia käytetään soveltamaan eri tyylejä tiettyyn elementtiin näytön koon perusteella. Tämä kirjoitus on esimerkki menetelmästä käyttää reagoivia keskeytyskohtia Tailwind CSS:ssä.