Док је дизајнирао респонзивну веб локацију, Таилвинд “ Преломне тачке ' и ' Медиа Куериес ” играју кључну улогу у примени вишеструких функција које се могу лако прилагодити различитим величинама екрана. Ове карактеристике треба да буду специфициране кроз различите класе, тј. мд (екрани средње величине)“, „лг (велики екран)“ или преко „@медиа ” правило које додаје функционалности на основу наведеног услова.
Овај чланак покрива следећи садржај:
- Како да примените дебљину декорације текста помоћу тачака прелома и медијских упита?
- Примена дебљине декорације текста са тачком прелома за задњи ветар.
- Примена дебљине декорације текста са Таилвинд медијским упитима.
Како да примените дебљину декорације текста помоћу тачака прелома и медијских упита?
„ Декорација текста Дебљина ” може се применити уз помоћ „ текст-декорација-дебљина ” након чега следи вредност циљне дебљине у пикселима. Ови пиксели могу бити „ 1пк“, „2пк“, „4пк“ или „8пк ”. „ Преломне тачке ” се примењују за прилагођавање различитих примењених функционалности у складу са величином екрана корисника помоћу „ мд (екрани средње величине)“, „лг (велики екран) ” класе итд. Медиа Куериес ” омогућавају условне стилове имплементације засноване на скупу параметара претраживача и ОС-а преко „@ медија ” правило.
Пример 1: Примена дебљине декорације текста са Таилвинд Бреакпоинтс
Овај пример поставља дебљину декорације текста на различитим местима да би се применио стил који варира у зависности од величине екрана:
< хтмл >
< глава >
< мета цхарсет = 'утф-8' >
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, инитиал-сцале=1' >
< наслов >< / наслов >
< скрипта срц = '6Ф06Д28Ф9027ДФ871279Ц633ЕЦ9АД74482ДБ1519' >< / скрипта >
< / глава >
< тело >
< тектареа класа = 'подвучено мд:децоратион-8 лг:бок-децоратион-слице тект-блацк тект-2кл' ид = 'темп' > Ово је Линукхинт < / тектареа >
< / тело >
< / хтмл >
Према овом исечку кода, примените доле наведене кораке:
- Прво, укључите ЦДН путању за примену Таилвинд функционалности.
- Затим направите „< тектареа >” и уградите наведене нивое дебљине декорације текста на подразумеваним и средњим екранима преко „ доктор медицине ” класе, респективно.
- „ текст-црно ' и ' текст-2кл ” класе додељују боју (црна) и величину фонта, односно 2кл тексту.
Излаз
Из овог исхода може се имплицирати да је дебљина декорације текста на одговарајући начин прилагођена променљивој величини екрана.
Пример 2: Примена дебљине декорације текста са Таилвинд медијским упитима
„@ медија ” правило се користи у медијским упитима за имплементацију различитих стилова за различите типове медија/уређаје. Ова конкретна демонстрација користи ове медијске упите за украшавање дебљине текста на основу наведеног параметра/услова:
< хтмл >
< глава >
< мета цхарсет = 'утф-8' >
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, инитиал-сцале=1' >
< наслов >< / наслов >
< скрипта срц = '6Ф06Д28Ф9027ДФ871279Ц633ЕЦ9АД74482ДБ1519' >< / скрипта >
< / глава >
< тело >
< х1 ид = 'темп' >Ово је Линукхинт< / х1 >
< / тело >
< / хтмл >
< стил тип = 'текст/цсс' >
#темп {
текст-декорација: подвучена;
текст- поравнајте : центар;
}
@ медија ( мак- ширина :550пк ) {
#темп {
тект-децоратион-тхицкнесс: 4пк;
} }
< / стил >
У овом блоку кода размотрите доле наведене методологије:
- Исто тако, укључите ЦДН путању.
- Затим додајте „< х1 >“ елемент који има наведени „ид“.
- У ЦСС делу кода, у оквиру „< стил >” стилизирајте укључени наслов.
- Такође, креирајте „@ медија ” правило које примењује услов такав да све док је ширина екрана „ 550пк “, дебљина текста-декорације је подешена на „ 4 ” пиксела.
- То је такво да након што ширина екрана пређе ову границу, текст ће бити једноставно подвучен.
Излаз
Овај исход означава да се правило „@медиа“, тј. медијски упити, примењује у складу са ширином екрана.
Закључак
Преломне тачке и медијски упити се могу применити са дебљином декорације текста да би се приказале примењене функционалности у складу са величином екрана корисника користећи различите класе као што су „ мд', 'лг ” или преко „@ медија ” правило, респективно. Последњи приступ је прецизиран у „ ЦСС ” код који позива циљни елемент и украшава га на основу постављеног параметра/услова. Овај водич је разрадио примену дебљине декорације текста помоћу Таилвинд Бреакпоинт и Медиа Куериес.