Тази статия ще обясни как да използвате точката на прекъсване и медийната заявка във връзка със свойството позиция в Tailwind.
Как да използвам точки на прекъсване и медийни заявки със свойството позиция?
Точките на прекъсване са основните блокове за създаване на върховен адаптивен дизайн. Използва се, за да направи оформлението адаптивно към различни размери на екрана. Медийните заявки се използват за прилагане на определени стилове към елементи в зависимост от разделителната способност на екрана. Атрибутът за позиция може да се приложи заедно с тях, за да направи изхода по-оптимизиран.
Стъпка 1: Прилагане на свойството позиция с точки на прекъсване и медийни заявки
В тази стъпка програмата се вмъква, за да приложи свойството позиция по точките на прекъсване или медийните заявки върху избрания „ стр ” елемент:
< тяло клас = 'bg-slate-500' >
< див клас = 'text-yellow-300 p-4 lg:p-8' >
< стр клас = 'относителен md:абсолютен md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:статичен lg:translate-x-4 lg:translate-y-4 ' > Този текст ще има различни размери на шрифта в зависимост от размера на екрана. Той ще бъде по-малък на малки екрани, среден на средни екрани и по-голям на големи екрани. < / стр >
< / див >
< / тяло >
В този код:
- “ bg-slate-500 ” задава цвета на фона на сив.
- “ текст-жълт-300 ” променя цвета на текста на жълт.
- “ p-4 ” добавя подложка от 4px.
- “ lg: p-8' добавя подложка от 8px на големи екрани.
- Първоначалната позиция се задава спрямо родителската страница с помощта на „ роднина ” клас.
- “ md:текст-lg ” прави текста голям на средно голям екран.
- „md:абсолютен“ променя позицията на текста от относителна към абсолютна на средно голям екран.
- “ md:translate-x-4” и „md:translate-y-4“ преместете текста 4px надолу и надясно на среден размер на екрана.
- “ lg:текст-xl ” променя размера на текста на изключително голям на екран с голям размер.
- “ lg: статичен ” променя позицията на текста по отношение на родителската страница от абсолютна на статична на екран с голям размер
- “ lg:translate-x-4 ' и ' lg:translate-y-4 ” преместете текста с 4 пиксела надолу и надясно на голям екран.
Стъпка 2: Проверете изхода
Визуализирайте уеб страницата, създадена от кода по-горе, и коригирайте размера на екрана, за да видите промяната като:
Може да се види, че текстът показва отзивчиво поведение на средни и големи размери на екрана.
Заключение
За да използвате точки на прекъсване и медийни заявки в Tailwind, приложете точката на прекъсване и задайте медийна заявка към всяка точка на прекъсване и също така променете свойството за позиция в различни точки на прекъсване на екрана. Разбивките по подразбиране са „ см ', ' md ', ' lg ', и ' xl ”. Този блог показа как да използвате точката на прекъсване и медийната заявка със свойството позиция в Tailwind.