W tym blogu zademonstrujemy proces stosowania zapytań o media i punktów przerwania za pomocą narzędzia overscroll w Tailwind.
Jak zastosować zapytania o media i punkty przerwania za pomocą funkcji Overscroll w Tailwind?
Aby zastosować punkty przerwania lub inną nazwę zapytań o media, jeśli chodzi o CSS z „ przewiń ' pożytek. Program HTML jest tworzony i stosuje różne punkty przerwania „ sm „”, „ md ' Lub ' lg ” z odpowiednimi klasami narzędzi z narzędzia „overscroll”. Zmienia zachowanie przewijania elementów na ekranach o różnych rozmiarach.
Krok 1: Użyj punktów przerwania i zapytań o media w kodzie HTML
Utwórz dokument HTML i zastosuj punkty przerwania, którymi są rozmiary ekranu i zapytania o media dla każdego punktu przerwania. Na przykład ' md ' I ' lg ” punkty przerwania są używane w poniższym kodzie w celu określenia rozmiaru tekstu i zastosowane jest do niego zachowanie overscroll:
< ciało klasa = „bg-łupek-500” >
< div klasa = „tekst-czerwony-900 p-4 lg:p-8” >
< P klasa = „względne md:absolute 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 :przetłumacz-y-4 ' > Ten tekst będzie miał różne rozmiary czcionek w zależności od rozmiaru ekranu. To będzie mniejszy na małych ekranach , średni - wielkości na średnich ekranach , i większe na dużych ekranach. P >
div >
ciało >
W tym kodzie:
- „ bg-slate-500 ” ustawia kolor tła na szary.
- „ tekst-czerwony-900 ” zmienia kolor tekstu na czerwony.
- „ str. 4 ” dodaje dopełnienie 4px.
- „ lg: str-8 ” dodaje dopełnienie o wielkości 8 pikseli na dużych ekranach.
- Początkowe położenie „ ” jest ustawiany względem strony nadrzędnej za pomocą znacznika „ względny ' klasa.
- „ md:absolutne ” zmień położenie tekstu z względnego na absolutne na średniej wielkości ekranie.
- „ md:overscroll-contain ” gwarantuje, że zachowanie „przewijania” będzie zawarte w tym elemencie, zamiast wpływać na całą stronę, gdy ekran jest średniej wielkości.
- „ md:tekst-lg ” powoduje, że tekst jest duży na średniej wielkości ekranie.
- „ md:tłumacz-x-4 ' I ' md:tłumacz-y-4 ”przesuń tekst” 4 piks ” w dół i w prawo na średnim ekranie.
- „ lg:overscroll-none ” ustawia „ przewiń ” class na none na dużym ekranie.
- „ lg:tekst-xl ” zmienia rozmiar tekstu na bardzo duży dla dużego ekranu.
- „ lg:statyczny ” zmienia pozycję tekstu względem strony nadrzędnej z bezwzględnej na statyczną dla dużego ekranu
- „ lg:tłumacz-x-4 ' I ' lg:tłumacz-y-4 ” przesuń tekst o 4 piksele w dół i w prawo na dużym ekranie.
Krok 2: Podgląd wyników
Teraz wyświetl podgląd strony internetowej utworzonej poprzez wykonanie powyższego kodu HTML i zmień rozmiar ekranu witryny HTML, aby zobaczyć widoczne zmiany:
Na powyższym ekranie, „ przewiń ” jest widoczne, a zmniejszając rozmiar ekranu można zauważyć, że rozmiar tekstu zmienia się w zależności od zastosowanych do niego zapytań o media.
Wniosek
Aby zastosować zapytania o media i punkty przerwania za pomocą „ przewiń ”, określ punkty przerwania za pomocą żądanej klasy z narzędzia „overscroll”. Zmieniając rozmiar ekranu, zapytania o media dostosowują obraz wyjściowy ekranu. Na tym blogu zademonstrowano proces stosowania zapytań o media i punktów przerwania z zachowaniem „przewijania” w Tailwind.