Овај чланак ће пружити процедуру за примену минималне и максималне висине на Таилвинд преломне тачке и медијске упите користећи следећи преглед:
- Подешавање својства Мин-хеигхт на Таилвинд Бреакпоинтс & Медиа Куериес
- Подешавање својства максималне висине на Таилвинд Бреакпоинтс & Медиа Куериес
Како подесити својство минималне висине на тачки прекида и медијским упитима?
Таилвинд обезбеђује подразумеване тачке прекида и медијске упите како би дизајн био прилагодљив за различите величине екрана. Својства обезбеђена тачкама прекида се примењују када се испуни наведена величина екрана. Минимална ширина за ове подразумеване тачке прекида је описана на следећи начин:
- см: Минимална ширина „640 пиксела“.
- доктор медицине: Минимална ширина „768 пиксела“.
- лг: Минимална ширина „1024 пиксела“.
- кл: Минимална ширина „1280пк“.
- 2кл: Минимална ширина „1536 пиксела“.
Својство мин-хеигхт поставља доњу границу за висину елемента. То значи да одређује минималну висину коју елемент сме да поседује. Да бисте користили својство мин-хеигхт са тачкама прекида у Таилвинд-у, користи се следећа синтакса:
< див класа = „{префикс тачке прекида}:мин-х-{вредност}...“ > < / див >
Хајде да користимо горе дефинисану синтаксу у демонстрацији да бисмо боље разумели. У овом примеру, минимална висина за елемент ће се повећати на „ доктор медицине ” тачка прекида. Ово ће резултирати повећањем укупне висине елемента.
< див класа = 'х-48 в-48 роундед-мд бг-греен-500 тект-центер мд:мин-х-сцреен' > Повећајте екран Величина за повећање минималне висине< / див >
Објашњење за горњи код је следеће:
- „ х-48 ” класа обезбеђује висину од 192 пиксела елементу див.
- „ в-48 ” класа обезбеђује висину од 192 пиксела елементу див.
- „ роундед-мд ” класа обезбеђује округли угао елемента див.
- „ бг-{цолор}-{нумбер} ” класа даје наведену боју позадини елемента див.
- „ текстуални центар ” класа поставља текстуални елемент у центар див елемента.
- „ мд:мин-х-сцреен ” ће повећати минимално ограничење висине на 100% висине екрана.
Излаз:
На излазу се може видети да када је „ доктор медицине ” је величина екрана испуњена, елемент ће добити 100% висине екрана. Ово се дешава зато што је ограничење минималне висине за „ доктор медицине ” тачка прекида је постављена једнака висини екрана:
Како подесити својство максималне висине на Таилвинд Бреакпоинт & Медиа Куериес?
Максимална класа висине поставља горњу границу за својство висине у Таилвинд-у. То значи да одређује максималну висину коју елемент може имати. Синтакса за коришћење класе минималне висине са тачкама прекида је следећа:
< див класа = „{префикс тачке прекида}:мак-х-{сизе}...“ > < / див >Хајде да користимо горе дефинисану синтаксу у демонстрацији да бисмо боље разумели. У овом примеру, елемент ће имати одређено ограничење максималне висине за „ доктор медицине ” тачка прекида. Ово ће сузити подразумевану висину која је дата елементу.
< див класа = 'х-96 в-48 роундед-мд бг-греен-500 тект-центер мд:мак-х-60' > Повећајте екран Величина за повећање минималне висине< / див >Имајте на уму да је у горњем коду подразумевана висина елемента дата са „х-96“, тј. 384пк. Међутим, ова висина се сужава на „240пк“ када се испуни тачка прекида „мд“. Ово је због „ мд:мак-х-60 ' класа.
Излаз:
У доњем излазу, може се јасно видети да када величина екрана достигне „ доктор медицине ” тачка прекида, висина елемента постаје мања.
То је све о постављању својства минималне и максималне висине са Таилвинд тачкама прекида.
Закључак
Да бисте подесили својство максималне висине са Таилвинд тачкама прекида и медијским упитима, „ {префикс тачке прекида}:мак-х-{сизе} ” се користи класа. Слично томе, да бисте поставили својство минималне висине са Таилвинд тачкама прекида, „ {префикс тачке прекида}:мин-х-{величина} ” се користи класа. Овај чланак је пружио процедуру за примену особина минималне и максималне висине на тачке прекида и медијске упите у Таилвинд-у.