Ta spletni dnevnik bo prikazal postopek uporabe medijskih poizvedb in prekinitvenih točk z uporabo pripomočka overscroll v Tailwindu.
Kako uporabiti medijske poizvedbe in prelomne točke s pomikanjem v zadnjem delu?
Če želite uporabiti prekinitvene točke ali druge medijske poizvedbe z imeni, ko gre za CSS, uporabite » overscroll ” pripomoček. Program HTML je ustvarjen in uporablja različne prekinitvene točke ' sm ', ' md « ali » lg « z ustreznimi razredi pripomočkov iz pripomočka »overscroll«. Spremeni obnašanje drsenja elementov na različnih velikostih zaslona.
1. korak: Uporabite prelomne točke in medijske poizvedbe v kodi HTML
Ustvarite dokument HTML in uporabite prelomne točke, ki so velikosti zaslona in medijske poizvedbe za vsako prelomno točko. Na primer ' md « in » lg ” so v spodnji kodi uporabljene prelomne točke za velikost besedila in zanj je uporabljeno vedenje prekoračitve:
< telo razred = 'bg-skrilavec-500' >
< div razred = 'text-rdeča-900 p-4 lg:p-8' >
< str razred = 'relativno md:absolutno 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 ' > To besedilo bo imelo različne velikosti pisave glede na velikost zaslona. To bo na malih zaslonih manjši , srednje - velikosti na srednjih zaslonih , in večji na velikih zaslonih. str >
div >
telo >
V tej kodi:
- “ bg-skrilavec-500 ” nastavi barvo ozadja na sivo.
- “ besedilo-rdeča-900 ” spremeni barvo besedila v rdečo.
- “ p-4 ” doda odmik 4 slikovnih pik.
- “ lg: str-8 ” doda odmik 8 slikovnih pik na velikih zaslonih.
- Začetni položaj ' ” je nastavljena glede na nadrejeno stran z uporabo relativno ” razred.
- “ md: absolutno ” spremenite položaj besedila iz relativnega v absolutni na srednje velikem zaslonu.
- “ md:overscroll-contain « zagotavlja, da je vedenje »overscroll« znotraj tega elementa, namesto da bi vplivalo na celotno stran, ko je zaslon srednje velikosti.
- “ md:besedilo-lg ” naredi besedilo veliko na srednje velikem zaslonu.
- “ md:translate-x-4 « in » md:translate-y-4 'premakni besedilo' 4px ” navzdol in desno na srednje velikem zaslonu.
- “ lg:overscroll-none ' nastavi ' overscroll ” lastnosti razreda nič na velikem zaslonu.
- “ lg:besedilo-xl ” spremeni velikost besedila v zelo veliko za velik zaslon.
- “ lg:statičen ” spremeni položaj besedila glede na nadrejeno stran iz absolutnega v statični za velik zaslon
- “ lg:translate-x-4 « in » lg:translate-y-4 ” premaknite besedilo za 4 slikovne pike navzdol in v desno na velikem zaslonu.
2. korak: Predogled izhoda
Zdaj si oglejte predogled spletne strani, ustvarjene z izvajanjem zgornje kode HTML, in spremenite velikost zaslona mesta HTML, da vidite vidne spremembe:
Na zgornjem zaslonu se prikaže » overscroll ” je vidno in z zmanjšanjem velikosti zaslona je razvidno, da se velikost besedila spreminja glede na medijske poizvedbe, uporabljene zanj.
Zaključek
Če želite uporabiti medijske poizvedbe in prekinitvene točke z ' overscroll ”, določite prekinitvene točke z nekim želenim razredom iz pripomočka “overscroll”. S spreminjanjem velikosti zaslona medijske poizvedbe prilagodijo izpis zaslona. Ta spletni dnevnik je pokazal postopek uporabe medijskih poizvedb in prelomnih točk z obnašanjem »overscroll« v Tailwindu.