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

Овај чланак показује кораке за креирање прилагодљивог дизајна веб локације у ХТМЛ и ЦСС користећи:

• Мета таг области приказа
• Респонсиве Имагес
• Флекбок Лаиоут
• Грид Лаиоут
• Медиа Куериес

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

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

Корак 1: Метаознака прозора приказа

„ виевпорт ” мета ознака игра виталну улогу у креирању респонзивног веб дизајна. Умеће се унутар „ <хеад> ” ознака ХТМЛ датотеке која садржи следеће атрибуте:

Горња мета ознака има два атрибута:

• „ име ” атрибут говори назив функционалности за коју је ова ознака креирана/коришћена. На пример, постављање „ виевпорт ' до ' име ” атрибут за рад са оквиром приказа различитих уређаја.
• „ садржаја ” атрибут дефинише претходну вредност атрибута. Поставља ширину сваког уређаја и скалира документ/веб страницу на 100%.

Корак 2: Прилагодљиве слике

Како се величина слике разликује једна од друге, тешко је подесити исту „ висина ” или “ ширина ” својство за сваку слику. Када је величина слике фиксна, корисници не мењају величину слике веб странице са екраном. Међутим, корисници могу да подесе слику која одговара помоћу следећег кода:

„ максимална ширина ” ЦСС својство ограничава приказ слике унутар додељеног простора. Постављањем вредности у „%“, слика се мења заједно са променом величине њеног надређеног елемента. Ово ствара ефекат одзива за слику.

Корак 3: Флекбок изглед

Изглед Флекбока се топло препоручује за креирање респонзивног дизајна веб странице. Омогућава ХТМЛ елементима да се прикажу на одређеној позицији и да промене величину доступног простора за свако дете у складу са величином која је доступна за родитељски див. Флекбок изглед садржи неколико својстава која пружају пуно слободе програмеру, као што је код у наставку:

У горњем исечку кода:

• Прво, креирајте родитељски елемент див са ИД-ом „ родитељ ' унутар ' <боди> ” ознака.
• Затим направите више подређених див елемената и доделите им класу „ дете ”.
• Затим изаберите „ родитељ ” класе и обезбеди вредност “ флек “за ЦСС” приказ ' имовина.
• Након тога наведите вредност „ 1 ' до ' флек “ својство сваком “ дете ” класа која чини да се подређени елемент приказује као флек.

Након извршавања горњег кода, веб страница изгледа овако:

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

Корак 4: Распоред мреже

Распоред мреже креира мрежу и додељује ХТМЛ елементе унутар дела мреже. Елементи мреже се мењају у односу на величину екрана веб странице. Он ствара прилагодљив дизајн како се величина ХТМЛ елемента мења у складу са екраном уређаја:

У горњем коду:

• Прво, креирајте родитељски див и доделите му класу „ саставни део ' унутар ' <боди> ” ознака. Након тога, креирајте три подређена елемента див у њему.
• Затим у ЦСС датотеци доделите „ грид ” вредност за „ приказ “ имовина за “ контејнер ” див.
• Након тога, направите три дела једнаке величине на веб страници користећи „ мрежа-шаблон-колона ” својство и поставите га једнако на “ 1фр 1фр 1фр ” где фр значи “ фракција ”.

Након компајлирања горњег кода, излаз изгледа овако:

Излаз приказује да див-ови сами мењају величину према величини екрана са једнаким пропорцијама.

Корак 5: Медијски упити

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

На пример, погледајте доњи исечак кода:

У горњем исечку кода:

• Прво поставите медијски упит који примењује ЦСС својства на изабрану класу елемената “ саставни део ” када ширина екрана постане већа од „ 640пк ”.
• Затим изаберите „класу компоненти и поставите вредност „ шумски зелено ' за ' боја позадине ' имовина.

Затим за горњи исјечак кода:

• Подесите медијски упит да примењује стилове када је величина ширине мања од „ 1000пк ”.
• Сада изаберите „ саставни део ” класе и обезбеди вредност “ додгерблуе ' за ' боја позадине ' имовина:

Након извршавања горњих исечака кода, излаз изгледа овако:

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

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

• За ' мали ” величина екрана, подесите ширину мању од „ 640пк ”.
• За ' средње ” величина екрана, ширина се креће између „ 641пк ' и ' 1007пк ”.
• За ' велики ” величина екрана, подесите ширину на „ 1008пк ” или већи.

Закључак

Да би креирали респонзивни дизајн веб странице, програмери треба да додају „ виевпорт <мета> ” ознака у “ <хеад> ” одељак са ознакама. Затим користите „ Флекбок ' и ' Грид ” Лаиоут. Ови модули изгледа помажу у креирању прилагодљивог дизајна. На крају, „ медијски упити ” помаже програмеру да стилизује различите верзије исте веб локације за различите величине екрана. Овај чланак је показао кораке помоћу којих се може креирати респонзивни дизајн веб странице.