9 напредних ЦСС трикова за медијске упите које треба да знате

Употребљиво, доступно искуство је од виталног значаја за успешну веб локацију. Ако ваши читаоци имају позитивно искуство, већа је вероватноћа да ће спровести позив на акцију, укључујући куповину производа. Такође је већа вероватноћа да ће се вратити или препоручити ваш сајт другима. Искуство је кључно.

Медијски упити нуде различите ЦСС функције које могу прилагодити вашу веб локацију. Омогућавају вам да прилагодите искуство сваког корисника на основу могућности његовог уређаја. Научите како да својим читаоцима пружите најбоље искуство, било да користе телефон или велики десктоп монитор.

1. Функција показивача

Тхе @медијско правило има функцију показивача која вам омогућава да прилагодите свој дизајн на основу примарног показивачког уређаја. Можете тестирати доступност и квалитет.

Овај показивач функција медијског упита узима једну од три вредности: ништа, грубо или фино. Тхе ниједан вредност се примењује када не постоји показивачки уређај. Тхе грубо вредност се примењује када примарни показивач има смањен ниво тачности. И тхе

у реду вредност се примењује када примарни показивачки уређај има висок ниво тачности.

Коришћење показивача Функција

Опције које можете изабрати: 
 Опција један
 Друга опција

Код изнад генерише две улазне радио опције, које ће се разликовати у зависности од тачности примарног показивачког уређаја рачунара.

Рачунар који има тачан (или висококвалитетан) примарни показивачки уређај ће приказати следећу веб страницу:

Рачунар који има примарни уређај ограничене прецизности (или ниског квалитета) ће приказати следећу веб страницу:

Уређај који има примарни показивачки уређај са ограниченим нивоом тачности има веће радио дугмад. Ово даје боље корисничко искуство за такве кориснике. Помоћу функције показивача можете осигурати да сви ваши корисници имају пријатно искуство, без обзира на уређај.

2. Функција било којег показивача

Као и функција показивача, функција медијског упита са било којим показивачем циља на показивачке уређаје. Међутим, функција било којег показивача процењује сваки показивачки уређај рачунара. Функција било којег показивача такође користи ниједан, грубо, и у реду вредности.

Коришћење функције било којег показивача

 @медиа (било који показивач: у реду) {
 инпут[типе="радио"] {
 ширина: 15пк;
 висина: 15пк;
 бордер-радиус: 20пк;
 бордер-видтх: 1пк;
 }
 }
@медиа (било који показивач: грубо) {
 инпут[типе="радио"] {
 ширина: 25пк;
 висина: 25пк;
 бордер-радиус: 20пк;
 бордер-видтх: 2пк;
 }
 }

Можете једноставно да замените горњи код са одељком за медијски упит кода у примеру функције показивача. Код изнад приказује одговарајући приказ на основу квалитета било ког показивачког уређаја који рачунар може имати.

3. Функција лебдења

Функција упита медија за лебдење процењује да ли је примарни механизам уноса уређаја способан да лебди изнад елемената у корисничком интерфејсу.

Коришћење функције лебдења

 /* ЦСС */
 а{
 текст-декорација: нема;
 боја Црна;
 }
 @медиа (ховер: ховер) {
 а: ховер {
 боја: плава;
 }
 }
 ХТМЛ 
 Елемент везе

Код изнад ће приказати ан елемент. Промениће боју (из црне у плаву) кад год примарни механизам за унос уређаја (који подржава лебдење) лебди изнад њега.

4. Функција било којег лебдења

Тхе било који лебдећи медијски упит циља било који механизам за унос, укључујући примарни механизам уноса.

Коришћење функције било којег лебдења

@медиа (било који ховер: лебдећи) {
 а: ховер {
 боја: плава;
 }
 }

Горњи медијски упит производи ефекат лебдења за било који механизам уноса који је способан да лебди изнад елемента.

5. Функција резолуције

Функција упита о резолуцији медија израчунава број пиксела које приказује одређени уређај. Уређај који приказује више пиксела по инчу има бољу резолуцију јер приказује слике са више детаља. Ова функција може помоћи програмеру да одлучи који корисници уређаја могу јасније да виде елементе корисничког интерфејса.

Функција резолуције користи опсег. То значи да поред коришћења резолуција кључну реч, можете користити мин-резолуција и максимална резолуција. Функција резолуције медијског упита припада типу података резолуције. То значи да је карактеристика резолуције мерљива у једној од три јединице: тачке по инчу (дпи), тачке по центиметру (дпцм) или тачке по пикселу (дппк).

Коришћење функције резолуције

/* ЦСС */
@медиа (минимална резолуција: 72 дпи) {
 п {
 бела боја;
 боја позадине: плава;
 }
}
 ХТМЛ 

 Лорем ипсум долор сит, амет цонсецтетур адиписицинг елит.

Најнижа резолуција коју уређај може да има и још увек приказује квалитетне слике је 72 дпи. Дакле, ако уређај има резолуцију од 72 дпи или више, приказаће следећи излаз у свом претраживачу:

6. Функција оријентације

Оквир за приказ уређаја може имати само једну од две оријентације: портрет или пејзаж. Требало би да имате на уму да се оријентација прозора за приказ разликује од оријентације уређаја. Ако уређај користи мекану тастатуру, његов оквир за приказ може да се промени из портретног у пејзажни док је сам уређај и даље у усправном положају.

Коришћење функције оријентације

/* ЦСС */
 тело{
 дисплеј: флек;
 }
 одељак{
 граница: 2пк пуна плава;
 паддинг: 3пк;
 маргина: 3пк;
 }
 @медиа (оријентација: пејзаж) {
 тело {
 флек-дирецтион: ред;
 }
 }
@медиа (оријентација: портрет) {
 тело {
 флек-дирецтион: колона;
 }
 }
 ХТМЛ 
 Лорем ипсум, долор сит амет цонсецтетур адиписицинг елит.

 Лорем ипсум, долор сит амет цонсецтетур адиписицинг елит.

 Лорем ипсум, долор сит амет цонсецтетур адиписицинг елит.

Код изнад мења изглед базе веб странице у зависности од оријентације уређаја.

Уређај са оквиром за приказ у пејзажном режиму ће приказати следећу веб страницу:

Уређај са оквиром за приказ у портретном режиму ће приказати следећу веб страницу:

7. Карактеристика висине

Функција упита о висини медија вам омогућава да одредите ЦСС стил на основу висине прозора за приказ на уређају корисника. Ова функција подржава опсег, тако да можете користити и мин-висина и максимална висина кључне речи.

Коришћење функције висине

 /* ЦСС */
 @медиа (мин. висина: 360 пиксела) {
 п{
 ивица: 2пк тачкаста наранџаста;
 }
}
 ХТМЛ 

 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит.

Код изнад прилагођава оно што корисник види на основу висине свог уређаја. Корисници са висином уређаја од 360 пиксела и више видеће нешто слично следећој веб страници:

Уређаји са висином испод 360 пиксела неће приказати ивицу око пасуса на веб страници.

8. Функција ширине

Функција упита за ширину медија вам омогућава да креирате специфичан ЦСС стил на основу ширине прозора за приказ на уређају корисника. Ова функција такође подржава опсег, тако да имате опцију да користите мин-ширина и максимална ширина кључне речи.

Коришћење функције ширине

 /* ЦСС */
 @медиа (минимална ширина: 600 пиксела) {
 п{
 ивица: 2пк пуна љубичаста;
 }
}
 ХТМЛ 

 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит.

Код изнад прилагођава оно што корисник види на основу ширине свог уређаја. Корисници са ширином уређаја од 600 пиксела и више видеће нешто попут следеће веб странице:

Коришћење медијских упита заснованих на ширини и висини може бити ефикасна стратегија у чинећи вашу веб локацију прилагодљивом.

9. Карактеристика боје

Функција упита за медије у боји процењује компоненту боје уређаја (црвена, зелена, плава). Вредност се односи на то колико битова екран користи за сваку компоненту, што дефинише колико различитих боја може да прикаже. Модерни уређаји обично користе 24-битни екран који користи осам бита по компоненти боје. Такође узима целобројну вредност, где је безбојни уређај нула.

Функција боје такође користи мин-боја и мак-цолор распони.

Коришћење функције боје

 /* ЦСС */
 @медиа (мин боја: 7) {
 п{
 граница: 2пк пуна зелена;
 }
}
 ХТМЛ 

 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит.

Уређаји са компонентом боје од седам и више приказаће следећи излаз у својим претраживачима:

Сада можете да креирате јединствено корисничко искуство

Требало би да будете у могућности да користите ове напредне медијске упите да побољшате искуство сваког корисника који посети вашу веб локацију или апликацију. Важно је да корисницима мобилних и десктоп рачунара пружите подједнако позитивно искуство на вашој веб локацији.

Медијски упити нису једини ЦСС алати који могу ојачати ваше вештине програмера.

8 основних ЦСС савета и трикова које сваки програмер треба да зна

Реад Нект

О аутору