Ovaj će blog demonstrirati postupak primjene medijskih upita i prijelomnih točaka pomoću uslužnog programa overscroll u Tailwindu.
Kako primijeniti medijske upite i prijelomne točke s prekoračenjem u Tailwindu?
Za primjenu prijelomnih točaka ili njegovih drugih medijskih upita kada je u pitanju CSS s ' prekoračiti ' korisnost. HTML program je stvoren i primjenjuje različite prijelomne točke ' sm ', ' doktor medicine ' ili ' lg ” s odgovarajućim klasama uslužnih programa iz uslužnog programa „overscroll”. Mijenja ponašanje pomicanja stavki na različitim veličinama zaslona.
Korak 1: Koristite prijelomne točke i medijske upite u HTML kodu
Izradite HTML dokument i primijenite prijelomne točke koje su veličine zaslona i medijski upiti za svaku prijelomnu točku. Na primjer ' doktor medicine ' i ' lg ” prijelomne točke koriste se u donjem kodu za veličinu teksta i na njega se primjenjuje ponašanje prekoračenja:
< tijelo razreda = 'bg-slate-500' >
< div razreda = 'text-red-900 p-4 lg:p-8' >
< str razreda = 'relativni md:apsolutni 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 :translate-y-4 ' > Ovaj će tekst imati različite veličine fonta ovisno o veličini zaslona. To bit će manji na malim ekranima , srednji - veličine na srednjim ekranima , a veće na velikim ekranima. str >
div >
tijelo >
U ovom kodu:
- “ bg-škriljevac-500 ” postavlja boju pozadine na sivu.
- “ tekst-crveno-900 ” mijenja boju teksta u crvenu.
- “ p-4 ” dodaje ispunu od 4 px.
- “ lg: str-8 ” dodaje ispunu od 8 piksela na velikim zaslonima.
- Početni položaj ' ” postavljena je u odnosu na nadređenu stranicu pomoću oznake „ relativna ” razred.
- “ md: apsolutni ” promijeniti položaj teksta iz relativnog u apsolutni na ekranu srednje veličine.
- “ md:overscroll-contain ” osigurava da je ponašanje “overscroll” sadržano unutar tog elementa umjesto da utječe na cijelu stranicu kada je zaslon srednje veličine.
- “ md:tekst-lg ” čini tekst velikim na ekranu srednje veličine.
- “ md:translate-x-4 ' i ' md:translate-y-4 'pomakni tekst' 4 px ” dolje i udesno na zaslonu srednje veličine.
- “ lg:overscroll-none ” postavlja “ prekoračiti ” svojstvo klase ništa na velikom zaslonu.
- “ lg:tekst-xl ” mijenja veličinu teksta u iznimno veliku za veliki zaslon.
- “ lg: statičan ” mijenja položaj teksta u odnosu na nadređenu stranicu iz apsolutnog u statični za veliki zaslon
- “ lg:translate-x-4 ' i ' lg:translate-y-4 ” pomaknite tekst 4 px prema dolje i udesno na velikom zaslonu.
Korak 2: Pregledajte izlaz
Sada pregledajte web stranicu stvorenu izvršavanjem gornjeg HTML koda i promijenite veličinu zaslona HTML stranice kako biste vidjeli vidljive promjene:
Na gornjem zaslonu, ' prekoračiti ” vidljivo je ponašanje i smanjenjem veličine zaslona može se vidjeti da se veličina teksta mijenja zbog medijskih upita primijenjenih na njega.
Zaključak
Za primjenu medijskih upita i prijelomnih točaka s ' prekoračiti ”, navedite prijelomne točke s nekom željenom klasom iz uslužnog programa “overscroll”. Mijenjanjem veličine zaslona medijski upiti prilagođavaju izlaz zaslona. Ovaj je blog demonstrirao postupak primjene medijskih upita i prijelomnih točaka s ponašanjem 'overscroll' u Tailwindu.