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

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

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





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



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



Разумевање прилагодљивог дизајна

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

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

Шта су медијски упити?

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



Прочитајте више: Ессентиал ЦСС3 Пропертиес Цхеат Схеет

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



Коришћење медијских упита

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

Структура медијских упита

Пример структуре медијског упита


@media only/not media-type and (expression){
/*CSS code*/
}

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



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

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

Пример медијског упита са једином кључном речи


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

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

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

Пример подразумеваног медијског упита


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Постављање медијских упита

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

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

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

Распон медијских упита

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

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

Пример упита за медијске таблете


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

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

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

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

Таблет Медиа Упит са примером опсега


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

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

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

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




href='tablet.css'>


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

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

ипхоне 12 про или про мак

Сада имате алате за креирање прилагодљивих дизајна

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

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

Објави Објави Твеет Емаил Како поставити позадинску слику у ЦСС -у

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

Прочитајте следеће Повезане теме
  • Програмирање
  • Веб Девелопмент
  • Веб дизајн
  • ЦСС
О аутору Кадеисха Кеан(Објављен 21 чланак)

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

Више од Кадеисха Кеан

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили