Tämä blogi esittelee mediakyselyjen ja keskeytyskohtien soveltamisprosessia Tailwindin ylivieritysapuohjelman avulla.
Kuinka käyttää mediakyselyjä ja raja-arvoja Overscrollilla Tailwindissä?
Voit käyttää keskeytyskohtia tai sen muita nimiä mediakyselyitä CSS:ssä ' ylivieritä ”apuohjelma. HTML-ohjelma luodaan ja käyttää erilaisia keskeytyskohtia ' sm ', ' md ' tai ' lg ' 'overscroll' -apuohjelman sopivilla apuohjelmilla. Se muuttaa kohteiden vierityskäyttäytymistä erikokoisilla näytöillä.
Vaihe 1: Käytä HTML-koodin keskeytyskohtia ja mediakyselyitä
Luo HTML-dokumentti ja käytä keskeytyskohtia, jotka ovat näytön koot ja mediakyselyt kullekin keskeytyspisteelle. Esimerkiksi ' md ' ja ' lg ” alla olevassa koodissa käytetään keskeytyskohtia tekstin koon määrittämiseen ja siihen sovelletaan ylivierityskäyttäytymistä:
< kehon luokkaa = 'bg-slate-500' >
< div luokkaa = 'text-red-900 p-4 lg:p-8' >
< s luokkaa = 'suhteellinen md:absoluuttinen md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none lg:text-xl lg:staattinen lg:käännä-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 suurempia suurilla näytöillä. s >
div >
kehon >
Tässä koodissa:
- ' bg-slate-500 ” asettaa taustavärin harmaaksi.
- ' teksti-punainen-900 ” muuttaa tekstin värin punaiseksi.
- ' p-4 ” lisää 4 pikselin täytteen.
- ' lg: p-8 ” lisää 8 pikselin pehmusteen suurille näytöille.
- ' ' -tunniste asetetaan suhteessa pääsivuun käyttämällä ' suhteellinen ”luokka.
- ' md: absoluuttinen ” muuttaa tekstin sijaintia suhteellisesta absoluuttiseksi keskikokoisella näytöllä.
- ' md:overscroll-contain ' varmistaa, että 'ylivieritys' sisältyy kyseiseen elementtiin sen sijaan, että se vaikuttaisi koko sivuun, kun näyttö on keskikokoinen.
- ' md:text-lg ” tekee tekstistä suuren keskikokoisella näytöllä.
- ' md:translate-x-4 ' ja ' md:translate-y-4 'siirrä tekstiä' 4px ” alas ja oikealle keskikokoisella näytöllä.
- ' lg:overscroll-none ' asettaa ' ylivieritä ”-luokan omaisuutta ei mihinkään suurella näytöllä.
- ' lg:teksti-xl ” muuttaa tekstin koon erittäin suureksi suurelle näytölle.
- ' 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: Esikatsele tulos
Esikatsele nyt suorittamalla yllä oleva HTML-koodi luotua verkkosivua ja muuta HTML-sivuston näytön kokoa nähdäksesi näkyvät muutokset:
Yllä olevassa näytössä ' ylivieritä ”-käyttäytyminen on näkyvissä ja näytön kokoa pienentämällä voidaan nähdä, että tekstin koko muuttuu siihen kohdistettujen mediakyselyjen mukaan.
Johtopäätös
Mediakyselyjen ja keskeytyskohtien käyttäminen ' ylivieritä ”-apuohjelma, määritä keskeytyskohdat jollain halutulla luokalla ”overscroll”-apuohjelmasta. Vaihtelemalla näytön kokoa mediakyselyt säätävät näytön ulostuloa. Tämä blogi on osoittanut prosessin, jossa mediakyselyitä ja keskeytyskohtia sovelletaan 'ylivieritys'-käyttäytymiseen Tailwindissä.