Како користити медијске упите у ХТМЛ-у и ЦСС-у за креирање одзивних веб локација

Ако желите да развијете веб локације / веб апликације, тада је знање вашег креирања одзивних дизајна од суштинске важности за ваш успех.

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

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

Разумевање одзивног дизајна

Укратко, прилагодљиви дизајн бави се употребом ХТМЛ / ЦСС-а за креирање изгледа веб странице / веб апликације који се прилагођава различитим величинама екрана. У ХТМЛ / ЦСС постоји неколико различитих начина за постизање одзива у дизајну веб странице:

• Коришћење рем и ем јединица уместо пиксела (пк)
• Постављање оквира за приказ / размере сваке веб странице
• Коришћење медијских упита

Медијски упит је карактеристика ЦСС-а која је објављена у ЦСС3 верзији. Увођењем ове нове функције корисници ЦСС-а добијају могућност прилагођавања приказа веб странице на основу висине, ширине и оријентације уређаја / екрана (пејзажни или портретни режим).

Опширније: Варалица о основним ЦСС3 својствима

Упити за медије пружају оквир за креирање кода једном и коришћење више пута током вашег програма. Ово можда не делује толико корисно ако развијате веб локацију са само три веб странице, али ако радите за компанију са стотинама различитих веб страница - показаће се да је ово велико време штедиша.

Постоји неколико различитих ствари које морате узети у обзир приликом употребе медијских упита: структура, пласман, опсег и повезивање.

Само @медиа / не врста медија и (израз) {
/ * ЦСС код * /
}

Општа структура медијског упита укључује:

• Кључна реч @медиа
• Не / једина кључна реч
• Тип медија (који може бити екран, штампа или говор)
• Кључна реч „и“
• Јединствени израз затворен у заграде
• ЦСС код затворен у пар отворених и затворених коврџавих заграда.

Повезан: Коришћење ЦСС-а за форматирање докумената за штампање

Екран само за @медиа и (мак-видтх: 450пк) {
тело {
боја позадине: плава;
}
}

Горњи пример примењује ЦСС стил (посебно плаву боју позадине) само на екране уређаја који имају ширину од 450 пиксела и мање - дакле, у основи паметне телефоне. Кључна реч „једини“ може се заменити кључном речи „не“, а тада би се ЦСС стил у горњем медијском упиту односио само на штампу и говор.

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

/ * дизајн за паметне телефоне * /
@медиа (мак-видтх: 450пк) {
тело {
боја позадине: плава;
}
}

Медијски упит је ЦСС својство; стога се може користити само у језику за обликовање. Постоје три различита начина да ЦСС укључите у свој код; међутим, само две од тих метода пружају практичан начин за укључивање медијских упита у ваше програме - интерни или екстерни ЦСС.

Интерни метод укључује додавање

Екстерни метод укључује стварање медијског упита у екстерној ЦСС датотеци и његово повезивање са вашом ХТМЛ датотеком путем ознака.

Без обзира да ли се медијски упити користе путем интерног или екстерног ЦСС-а, постоји један главни аспект језика за обликовање који може негативно утицати на функционисање медијског упита. ЦСС има правило првенства. Када користите а ЦСС селектор, или у овом случају медијски упит, сваки нови медијски упит који се дода у ЦСС датотеку поништава (или има предност у односу на претходни).

Подразумевани код за медијске упите који имамо изнад циља паметне телефоне (ширине 450 пиксела и мање), па ако желите да подесите различита позадина за таблете за које бисте могли помислити да бисте једноставно могли да додате следећи код у своју постојећу ЦСС датотеку.

/ * дизајн за таблете * /
@медиа (максимална ширина: 800пк) {
тело {
боја позадине: црвена;
}
}

Једини проблем је што би, због редоследа првенства, таблети имали црвену боју позадине, а паметни телефони сада би такође имали црвену боју позадине, јер је 450 и мање испод 800 пиксела.

Један од начина за решавање овог малог проблема био би додавање медијског упита за таблете пре упита за паметне телефоне; ово друго би заменило прво и сада бисте имали паметне телефоне са плавом бојом позадине и таблете са црвеном бојом позадине.

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

/ * дизајн за таблете * /
@медиа (мак-видтх: 800пк) анд (мин-видтх: 451) {
тело {
боја позадине: црвена;
}
}

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

Ако не желите да уграђујете медијске упите у ЦСС код, постоји алтернативни метод који можете да користите. Ова метода укључује употребу медијских упита у ознаку ХТМЛ датотеке, па уместо да имате један масиван табелу стилова који садржи поставке стила за паметни телефони, таблети и рачунари - могли бисте да користите три засебне ЦСС датотеке и да креирате своје медијске упите у тхе ознака.

Тхе таг је ХТМЛ елемент који се користи за увоз ЦСС стила из спољне табеле стилова. Ова ознака има својство медија које функционише на исти начин као и медијски упит у ЦСС-у.

 главна табела стилова 

 табела стилова таблета 
хреф = "таблет.цсс">
 табела стилова паметних телефона 

Горњи код треба ставити у

ознака ваше ХТМЛ датотеке. Сада све што треба да урадите је да направите три засебне ЦСС датотеке са именима датотека маин.цсс, таблет.цсс и смартпхоне.цсс - а затим створите одређени дизајн који бисте желели за сваки уређај.

Стил у главној датотеци примењиваће се на све екране ширине веће од 800 пк, примењиваће се стил у датотеци таблета на све екране ширине између 450пк и 801пк, а стил у датотеци паметног телефона примењиваће се на све екране испод 451пк.

Ако сте стигли до краја овог чланка, могли сте да сазнате шта је прилагодљиви дизајн и зашто је користан. Сада можете да идентификујете и користите медијске упите у ЦСС и ХТМЛ датотекама. Поред тога, упознали сте се са редоследом приоритета у ЦСС-у и видели сте како то може утицати на то како функционишу ваши медијски упити.

Кредит за слику: Негативни простор /Пексела

Како поставити позадинску слику у ЦСС

ЦСС је моћан алат за обликовање веб страница. Учење како поставити позадинску слику учи вас многим основама ЦСС-а.

Прочитајте следеће

О аутору