Овај чланак ће објаснити како да користите тачку прекида и медијски упит у вези са својством позиције у Таилвинд-у.
Како користити тачке прекида и медијске упите са својством позиције?
Преломне тачке су основни блокови за креирање врхунског респонзивног дизајна. Користи се да би изглед био прилагодљив различитим величинама екрана. Медијски упити се користе за примену одређених стилова на елементе у зависности од резолуције екрана. Атрибут позиције се може применити заједно са овим да би се резултат учинио оптимизованијим.
Корак 1: Примена својства позиције са тачкама прекида и медијским упитима
У овом кораку, програм се убацује да примени својство позиције дуж тачака прекида или медијских упита преко изабраног „ стр ” елемент:
< тело класа = 'бг-слате-500' >
< див класа = 'текст-жуто-300 п-4 лг:п-8' >
< стр класа = 'релативни мд:апсолутни мд:тект-лг мд:транслате-к-4 мд:транслате-и-4 лг:тект-кл лг:статиц лг:транслате-к-4 лг:транслате-и-4 ' > Овај текст ће имати различите величине фонта у зависности од величине екрана. Биће мањи на малим екранима, средње величине на средњим екранима и већи на великим екранима. < / стр >
< / див >
< / тело >
У овом коду:
- “ бг-слате-500 ” поставља боју позадине на сиву.
- “ текст-жуто-300 ” мења боју текста у жуту.
- “ п-4 ” додаје допуну од 4 пиксела.
- “ лг: п-8' додаје паддинг од 8 пиксела на великим екранима.
- Почетна позиција се поставља у односу на родитељску страницу помоћу „ релативан ' класа.
- “ мд:текст-лг ” чини текст великим на екрану средње величине.
- “мд:апсолутно” мења положај текста из релативног у апсолутни на екрану средње величине.
- “ мд:транслате-к-4” и “мд:транслате-и-4” померите текст 4 пиксела надоле и удесно на средњој величини екрана.
- “ лг:текст-кл ” мења величину текста у изузетно велику на великом екрану.
- “ лг:статиц ” мења положај текста у односу на родитељску страницу из апсолутног у статички на екрану велике величине
- “ лг:транслате-к-4 ' и ' лг:транслате-и-4 ” померите текст за 4 пиксела надоле и удесно на великом екрану.
Корак 2: Проверите излаз
Прегледајте веб страницу креирану помоћу кода изнад и прилагодите величину екрана да видите промену као:
Може се видети да текст показује одзивно понашање на средњим и великим екранима.
Закључак
Да бисте користили тачке прекида и медијске упите у Таилвинд-у, примените тачку прекида и поставите медијски упит на сваку тачку прекида, а такође промените својство положаја на различитим тачкама прекида екрана. Подразумеване кварове су „ см ', ' доктор медицине ', ' лг ', и ' кл ”. Овај блог је показао како да користите тачку прекида и медијски упит са својством позиције у Таилвинд-у.