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