W tym artykule wyjaśniono, jak używać punktu przerwania i zapytania o media w połączeniu z właściwością position w Tailwind.
Jak korzystać z punktów przerwania i zapytań o media z właściwością pozycji?
Punkty przerwania to podstawowe bloki umożliwiające stworzenie najlepszego, responsywnego projektu. Służy do dostosowania układu do różnych rozmiarów ekranów. Zapytania o media służą do stosowania określonych stylów do elementów w zależności od rozdzielczości ekranu. Atrybut pozycji można zastosować w połączeniu z nimi, aby uzyskać bardziej zoptymalizowane dane wyjściowe.
Krok 1: Stosowanie właściwości Position z punktami przerwania i zapytaniami o media
Na tym etapie wstawiany jest program, który zastosuje właściwość pozycji wzdłuż punktów przerwania lub zapytań o media w wybranym „ P ' element:
< ciało klasa = „bg-łupek-500” >
< div klasa = „tekst-żółty-300 p-4 lg:p-8” >
< P klasa = „względne md:absolutne md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > Ten tekst będzie miał różne rozmiary czcionek w zależności od rozmiaru ekranu. Będzie mniejszy na małych ekranach, średni na średnich ekranach i większy na dużych ekranach. < / P >
< / div >
< / ciało >
W tym kodzie:
- „ bg-slate-500 ” ustawia kolor tła na szary.
- „ tekst-żółty-300 ” zmienia kolor tekstu na żółty.
- „ str. 4 ” dodaje dopełnienie 4px.
- „ lg: p-8' dodaje dopełnienie 8px na dużych ekranach.
- Pozycję początkową ustala się względem strony nadrzędnej za pomocą przycisku „ względny ' klasa.
- „ md:tekst-lg ” powoduje, że tekst jest duży na średniej wielkości ekranie.
- „md:absolutne” modyfikuje położenie tekstu z względnego na absolutne na ekranie średniej wielkości.
- „ md:tłumacz-x-4” I „md:tłumacz-y-4” przesuń tekst o 4 piksele w dół i w prawo na średnim ekranie.
- „ lg:tekst-xl ” zmienia rozmiar tekstu na bardzo duży na dużym ekranie.
- „ lg:statyczny ” zmienia pozycję tekstu względem strony nadrzędnej z absolutnej na statyczną na dużym ekranie
- „ 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: Sprawdź dane wyjściowe
Wyświetl podgląd strony utworzonej za pomocą powyższego kodu i dostosuj rozmiar ekranu, aby zobaczyć zmianę jako:
Można zauważyć, że tekst zachowuje się responsywnie na średnich i dużych ekranach.
Wniosek
Aby używać punktów przerwania i zapytań o media w Tailwind, zastosuj punkt przerwania i ustaw zapytanie o media dla każdego punktu przerwania, a także zmień właściwość pozycji w różnych punktach przerwania na ekranie. Domyślne podziały to „ sm „”, „ md „”, „ lg ', I ' XL ”. W tym blogu pokazano, jak używać punktu przerwania i zapytania o media z właściwością position w Tailwind.