Овај текст ће илустровати метод за коришћење тачака прекида у Таилвинд ЦСС-у.
Како користити реактивне преломне тачке у Таилвинд-у?
Да бисте користили тачке прекида у Таилвинд-у, користите модификаторе одзива, као што је „ см ”, “ доктор медицине ”, “ лг ”, “ кл ' и ' 2кл ” са осталим класама у ХТМЛ програму. Затим погледајте ХТМЛ веб страницу и промените величину екрана да бисте били сигурни да тачке прекида раде исправно.
Корак 1: Користите респонзивне модификаторе у ХТМЛ програму
Направите ХТМЛ програм и користите модификаторе одзива са жељеним стилом. На пример, користили смо „ см ”, “ доктор медицине ”, “ лг ”, “ кл ' и ' 2кл ” прилагодљиви модификатори:
< тело >
< див класа = 'х-сцреен бг-фуцхсиа-400 см:бг-пинк-600 мд:бг-греен-700 лг:бг-пурпле-500 кл:бг-теал-600 2кл:бг-иеллов-500' >
< х1 класа = 'текст-7кл текст-бели текст-центар п-20' > Линук савет < / х1 >
< / див >
< / тело >
овде:
- “ бг-фуксија-400 ” класа поставља боју позадине за до фуксије.
- “ см:бг-пинк-600 ” класа примењује ружичасту боју на позадину за мале екране.
- “ мд:бг-греен-700 ” класа мења боју позадине у зелену на средњим екранима.
- “ лг:бг-пурпле-50 ” класа поставља боју позадине на љубичасту за велике екране.
- “ кл:бг-теал-600 ” класа примењује плаву боју на позадину за изузетно велике екране.
- “ 2кл:бг-иеллов-500 ” класа мења боју позадине у жуту на 2кл екранима.
Корак 2: Проверите излаз
Погледајте ХТМЛ веб страницу да бисте проверили да ли преломне тачке функционишу исправно или не:
На горњој веб страници може се приметити да се боја веб странице мења са величином екрана према којој су одређене тачке прекида.
Закључак
Да бисте користили тачке прекида у Таилвинд-у, користите модификаторе одзива, као што је „ см ”, “ доктор медицине ”, “ лг ”, “ кл ' и ' 2кл ” са осталим класама у ХТМЛ програму. Ови модификатори се користе за примену различитих стилова на одређени елемент на основу величине екрана. Овај текст је пример метода за коришћење тачака прекида у Таилвинд ЦСС-у.