Како да направите прилагодљив изглед

А. Одговарајући Распоред је постала норма у веб дизајну, ова врста изгледа странице значи да ако прозор који га садржи нагло промени величину, то јест од веома великог до врло малог и обрнуто, наши елементи морају бити у могућности да се преуреде како би одржали пристојно и функционално корисничко искуство.

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

Иако постоји неколико оквира као што су Боотстрап или Фоундатион који нам задају прилагодљив распоред, не можемо увек зависити од њих, зато је врло корисно знати како можемо властитим средствима изградити изглед ових карактеристика.

Захтеви

1- Да бисмо довршили овај водич, морамо имати основно знање ХТМЛ И ЦСС, будући да су од виталног значаја за разумевање примера наведених у водичу.

2- Са техничке стране, потребан нам је барем модеран прегледач попут Гоогле Цхроме, уређивач текста за писање нашег кода, можемо користити Узвишени текст о НотеПад ++ или чак Виндовс нотепад или Гедит на Линуксу ако се осећамо авантуристички.

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

Својства минвидтх и маквидтх

Ово је можда први аспект на који наилазимо при раду са окружењима одзиван, будући да се много пута концентришемо на то да страница постане мања, али шта је са новим екранима 4К? Зато не смемо занемарити максималну резолуцију под којом наша веб страница изгледа пристојно.

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

У следећем примеру показаћемо како можемо да регулишемо своје лаиоут захваљујући поменутим својствима, за ово ћемо креирати документ ХТМЛ са следећим садржајем:

 Пример прилагодљивог изгледа 1
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Сед ет темпор арцу, семпер елементум нунц. Маурис ат сем ут јуст цонваллис макимус ет витае орци. Нулла ултрицес порттитор ерат нон содалес. Пхаселлус вариус ипсум нон лигула аликует улцерициес ин куис паин. Аликуам ац нисл вехицула.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Сед ет темпор арцу, семпер елементум нунц. Маурис ат сем ут јуст цонваллис макимус ет витае орци. Нулла ултрицес порттитор ерат нон содалес. Пхаселлус вариус ипсум нон лигула аликует улцерициес ин куис паин. Аликуам ац нисл вехицула.

Оно што смо урадили је креирање три див елемента који функционишу као нека врста колоне, па у овом случају кажемо његовом елементу контејнера чланак да ће његова максимална ширина бити 1200 пкДакле, без обзира на то колико је екран велики, дизајн од тада више неће расти, тада стварамо три класе, по једну за сваки див, а другу додељујемо минималну ширину на овај начин, без обзира на то колико је екран смањен, За одржавање тог минимума пропорција, ово је одлично за слике као што ћемо видети на снимку екрана примера, и на крају до класе пловак додељујемо му и минималну ширину. Хајде да видимо како наш пример изгледа у прегледачу када имамо велику резолуцију:

ЕНЛАРГЕ

Хајде сада да видимо како се он скалира када мало смањимо прозор прегледача:

ЕНЛАРГЕ

Коначно, да видимо резултат када учинимо да прозор има величину сличну величини мобилног телефона:

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

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

Помоћу Релативе Паддинг

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

Поента је да је паддинг се скоро никада не узима у обзир при изради а лаиоут бити одзиван што резултира текстовима и садржајем који касније остају неестетски при промени резолуције са којом се гледа на дизајн.

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

 Релативе ПаддингОдржавајте пропорције релативним подметањем
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Сед ет темпор арцу, семпер елементум нунц. Маурис ат сем ут јуст цонваллис макимус ет витае орци. Нулла ултрицес порттитор ерат нон содалес.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Сед ет темпор арцу, семпер елементум нунц. Маурис ат сем ут јуст цонваллис макимус ет витае орци. Нулла ултрицес порттитор ерат нон содалес.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Сед ет темпор арцу, семпер елементум нунц. Маурис ат сем ут јуст цонваллис макимус ет витае орци. Нулла ултрицес порттитор ерат нон содалес.

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

ЕНЛАРГЕ

Сада, ако смањимо величину прозора, видећемо како се врши прилагођавање, али задржавајући пропорционалну удаљеност од текста до ивица:

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

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

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