Још један фактор који води ка фокусирању на дизајн који је прилагођен мобилним уређајима је да већина људи приступа интернету преко својих мобилних уређаја, што је 60%. Док само 20% људи користи интернет на десктоп рачунарима.
Овај чланак ће покрити упутства за креирање респонзивног дизајна за мобилне уређаје.
Како подесити дизајн који је први прилагођен мобилним уређајима?
Дизајн који реагује, без обзира да ли је прилагођен мобилним уређајима или за веће екране, може се креирати следећим методама датим у наставку:
- Направите респонзивни дизајн за мобилне уређаје.
- Користите/користите медијски упит да бисте развили/креирали респонзивни дизајн за веће екране.
Метод 1: Креирајте дизајн који се први пут прилагођава мобилним уређајима
Прво, почните са креирањем приступа дизајну на првом месту за мобилне уређаје. У ту сврху, прођите кроз упутства која су наведена у наставку.
Корак 1: Креирајте ХТМЛ структуру
Прво направите ХТМЛ структуру и додајте „ Боотстрап ” у <хеад> одељак. Да бисте научили додавање стилова у ХТМЛ одељак кликните на ово линк . Након креирања основне структуре веб странице укључујући, <нема> , <хеадер> и <фоотер> као што је наведено у наставку:
< тело ><хеадер>
<нема>
< ул >
< то >< а хреф = '#' > Кућа < / а >< / то >
< то >< а хреф = '#' > О нама < / а >< / то >
< то >< а хреф = '#' > Наше услуге < / а >< / то >
< то >< а хреф = '#' > Контактирајте нас < / а >< / то >
< / ул >
< / но>
< / заглавље>
<маин>
<сецтион>
< х1 > Добродошли у Линук савет < / х1 >
< стр > Веб локација са упутствима. < / стр >
< / одељак>
< / маин>
<фоотер>
< стр > Линук савет Ауторска права < / стр >
< / фоотер>
< / тело >
Корак 2: Примените ЦСС
У одељку тело подесите „ породица фонтова ' до ' Санс Сериф ”. Такође подесите паддинг, маргину и боју позадине. Након тога примените ЦСС на заглавље, подножје и навигацију:
тело {породица фонтова : Санс Сериф ;
маргина : 0 ;
паддинг : 0 ;
боја позадине : #808080 ;
}
заглавље {
боја позадине : љубичаста ;
боја : бео ;
паддинг : 8пк ;
}
нав ул {
листа-стил-тип : ниједан ;
паддинг : 0 ;
маргина : 0 ;
}
њихов брод {
маргина : 4пк 0 ;
}
нав ул ли а {
боја : бео ;
текст-декорација : ниједан ;
}
главни {
паддинг : 18пк ;
}
фоотер {
боја позадине : розе ;
боја : бео ;
Поравнање текста : центар ;
паддинг : 8пк ;
}
Као што се може приметити, доњи излаз је потврдио да је дизајн прилагођен за мобилне уређаје:
Метод 2: Користите медијске упите за креирање респонзивног дизајна за веће екране
Горе наведени дизајн се такође може креирати за веће екране као што су таблети и десктопи. У ту сврху корисници треба да укључе медијски упит у ЦСС. Ширина за таблете је “ 786пк ” а за десктоп рачунаре је „ 1024пк ”.
Да бисте применили медијске упите, прво укључите „ @медиа ” у ЦСС датотеци. Након тога, наведите својство „мин-видтх” као „ 768пк ”. То значи да кад год се испуни минимална величина екрана „768пк“ или више, онда ће се применити следећи ЦСС:
@медиа ( мин-ширина : 768пк ) {тело {
фонт-сизе : 14пк ;
}
заглавље {
паддинг : 18пк ;
}
нав ул {
приказ : флек ;
}
њихов брод {
маргина : 0 8пк ;
}
главни {
приказ : флек ;
оправдати-садржај : простор-између ;
алигн-итемс : центар ;
}
фоотер {
паддинг : 18пк ;
}
}
Доњи излаз је показао да дизајн такође реагује на веће екране:
Закључак
Да бисте подесили респонзивни дизајн за мобилне уређаје, прво направите ХТМЛ структуру и додајте оквир за приказ. Након тога повежите ЦСС датотеку у ознаци хеад. Затим примените ЦСС заснован на респонзивном дизајну који је на првом месту за мобилне уређаје. Штавише, корисници могу да додају ЦСС медијски упит за прилагођавање на мобилном уређају. Овај текст је демонстрирао детаљну процедуру за постављање дизајна који је прилагођен мобилним уређајима.