Овај пост ће поменути смернице неопходне за имплементацију медијских упита.
Како имплементирати медијске упите за мобилне уређаје?
Упит за медије се може применити на мобилне уређаје једноставним помињањем „ @медиа ” и навођење величине екрана у малим заградама. ЦСС за тај медијски упит се затим може додати унутар витичастих заграда. Кад год величина екрана одговара величини коју је одредио корисник, примениће наведени медијски упит.
Хајде да погледамо практичан пример да научимо имплементацију медијских упита за мобилне уређаје.
Пример: Креирајте изглед који се мења са распореда са две колоне на изглед једне колоне применом упита за медије
У следећем примеру, изглед веб странице ће се променити из изгледа колоне у изглед са једном колоном:
Корак 1: Креирајте ХТМЛ структуру
- Прво, направите ХТМЛ датотеку и повежите спољну датотеку ЦСС стилова у њој <хеад> одељак.
- Затим креирајте а <хеадер> одељак и додајте наслов веб локације помоћу <х1> таг.
- Створити <див> по имену класе “цонтаинер-цласс” и још два <див> унутар њега имају име класе “ колона ”.
<хеадер>
< х1 > Линук савет < / х1 >
< / заглавље>
< див класа = 'контејнерска класа' >
< див класа = 'колона' >
< х2 > Одељак један < / х2 >
< стр > Линук Хинт је једна од најбољих платформи за е-учење. < / стр >
< / див >
< див класа = 'колона' >
< х2 > Одељак два < / х2 >
< стр > Линук Хинт је једна од најбољих платформи за е-учење. < / стр >
< / див >
< / див >
< / тело >
Корак 2: Примените ЦСС
На делу тела:
- Прво наведите одељак тела тако што ћете написати „ тело ” и помињање витичастих заграда.
- Унутар заграда наведите породицу фонтова, боју позадине, маргину и паддинг.
На <хеадер> одељак:
- Одредите боју текста, поравнање текста, боју позадине и паддинг.
На “класа контејнера” див:
- Подесите ' приказ ” вредност својства на “ флек ” да бисте креирали Флекбок.
- Користити ' оправдати-садржај ” да бисте додали размак између садржаја и додали допуну.
На класи колоне:
- Прво наведите наведену вредност у „ флек ” да бисте додали размак између два одељка изгледа.
- Након тога додајте боју позадине, ивицу, паддинг и величину кутије.
Корак 3: Примените медијски упит
- Да бисте применили медијски упит за мобилне уређаје, прво додајте „ @медиа ” ознака.
- Затим наведите вредност „ 768пк ” што је типично за мобилне уређаје до „ максимална ширина ” својство унутар малих заграда.
- Након тога наведите „ колона ” вредност за „ флек-дирецтион ” својство које ће се односити на „ контејнер-класа” класа. Ово ће променити две колоне у једну колону кад год се открије наведена величина екрана.
- На крају, примените ЦСС на „ колона ” класе и наведите “ маргина ' и ' флек ” вредности:
фонт-фамили: санс-сериф;
позадина- боја : сребро;
маргина: 0 ;
паддинг: 0 ;
}
заглавље {
позадина- боја : #2ф4ф4ф;
паддинг: 20пк;
текст- поравнајте : центар;
боја : бео;
}
.контејнер- класа {
дисплеј: флек;
оправдати- садржаја : простор-између;
паддинг: 20пк;
}
.колона {
флек: 0 1 цалц ( педесет % - 10пк ) ;
граница : 1пк пуна зелена;
позадина- боја : бео;
бок-сизинг: бордер-бок;
паддинг: 20пк;
}
@ медија ( мак- ширина : 768пк ) {
.контејнер- класа {
флек-дирецтион: колона;
}
.колона {
флек: 0 1 100 %;
маргин-боттом: 20пк;
}
}
Излаз
Ево излаза веб странице након примене медијског упита. Овај излаз је изглед са две колоне:
Кад год екран испуни одређене димензије помоћу упита за медије за мобилне уређаје, он се претвара у изглед са једном колоном:
Закључак
Да бисте имплементирали медијске упите за мобилне уређаје, прво укључите „ виевпорт ” у „ глава ” одељак. Затим напишите ЦСС специфичан за мобилни дизајн. Након тога, додајте медијски упит користећи ознаку „@медиа“ и наводећи величину мобилног екрана. На пример, наведите 768 пиксела за таблете и 480 пиксела за мобилне телефоне. Овај чланак је објаснио процедуру за имплементацију медијских упита за мобилне уређаје.