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