Адаптивни изглед веб локације: упуте корак-по-корак са примјерима

Лаиоут је креирање структуре и дизајна елемената веб странице. Код писања за веб страницу је дизајнер дизајна или фронт-енд програмер. Користи графички програм за резање распореда, уређивач кода, додатне програме за убрзавање процеса.

Шта је распоред

Шифра изгледа је костур странице странице, написана у језику за означавање хтмл. Састоји се од логички подељених на делове страница - ознака. Сваки од њих је одговоран за своју област: мени, подрум, медији, обрасци, мапе, претраживање локације, време. Они имају атрибуте, уз њихову помоћ идентификују се појединачни елементи. Цасцадинг стиле схеетс су одговорни за дизајн, а јавасцрипт за динамичке ефекте.

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

За креирање страница према савременим стандардима користе се различите методе адаптивног распореда. Ово осигурава исправан приказ елемената на свим типовима екрана.

Врсте изгледа

Стандарди се константно побољшавају, и као резултат тога, мијењају се начини израде распореда. Тренутно постоје 3 главне врсте страница:

• статиц;
• гума;
• адаптиве.

Статични изгледи су странице које нису у стању да промене дизајн. Њихов дизајн се не мења, а димензије елемената имају јасно значење.

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

Приликом креирања гуменог распореда, узима се у обзир и промена величине екрана и сви елементи се подешавају. Главна разлика од адаптивног је што се распоред шири или скупља испод екрана у сваком тренутку промене.

Проверите који од принципа се користи, како следи. Ако, приликом истезања прозора претраживача, страница се протеже заједно са њом, онда је ово гумени изглед. Када се страница странице промени на само неколико позиција, то значи да је прилагодљива.

Величине за адаптивни распоред

Да би се креирали адаптивни распореди, користе се релативне јединице мере уместо стандардног статичког пк. Најчешћи:

• ем;
• рем;
• %

У адаптивном распореду на хтмл, ем се користи за подешавање величине фонта и увлачења. Подразумевано, 1 ем је 16 пиксела. У складу с тим, да бисте поставили фонт за параграф п величине 32 пиксела, морате навести сљедеће:

п {

фонт-сизе: 2ем;

}

Посебност употребе јединице је да је 1ем једнак величини фонта његовог елемента. То значи да 1ем узима различите вриједности у различитим дијеловима кода. На пример, у блоку где је величина фонта 2ем (32пк), маргина у 1ем ће бити 32 пиксела. Али где је фонт 1ем (16пк), паддинг у 1ем ће бити једнак стандардним 16 пиксела.

Рем - роот ем, који је дефинисан у ознаци . 1 роот-ем, за разлику од 1ем, једнак је једном броју под било којим околностима. Вредност се мења само када су промене принудне.

Проценат се обично користи за подешавање ширине блокова или слика. Без обзира на величину екрана, она ће одговарати наведеној вриједности, на примјер, 80%.

Медиа куериес

ЦСС укључује подршку за различите техничке параметре уређаја. Смарт телефон са малим екранским проширењем је одређен, својство стила је назначено испод његове вредности. Медијски упити откривају разлике у оријентацији: портрет и пејзаж. Широко се користи за креирање адаптивног изгледа. Изглед за прилагођавање наведеном резолуција екрана структура документа се мења у складу са кодексом.

Одређени типови уређаја:

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

У вредности имена захтева постоји неколико услова. На пример, приказивање садржаја само за екране монитора и само максималну ширину од 600 пк. Изгледа овако:

@медиа екран и (мак-видтх: 600пк) {оутпут цоде}.

Адаптивни дизајн се заснива на употреби медијских упита. Креира распоред за екране са минималном ширином од 1200 пиксела, тело кода је постављено на @медиа екрану и (мак-видтх: 1200пк) {}. Затим се креира блок за @медиа екран и (мин-видтх: 700пк) таблет {} и @медиа екран и (мак-видтх: 699пк) {} мобилни уређаји.

Прво мобилни

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

Приступ компаније Фирст Фирст подразумева приказивање најважнијег садржаја, једноставан и оптимизован веб сајт, одбијање преузимања других ресурса.

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

Боотстрап

Један од популарних оквира који је дао једноставан одговор на питање како направити адаптивни распоред је Твиттер Боотстрап. Уз помоћ решетке за подизање система од 12 колона, креирају се веб странице које се одмах приказују исправно по подразумеваној вредности на екранима мобилних уређаја. Главни алати који се користе су:

• претходно одређена ширина колона, која може одредити ширину елемената;
• компоненте фиксних и гумених докумената;
• уграђене фонтове и класе за њих;
• средства за дизајнирање столова;
• дизајн класе у палети алатки менија.

Динамички ефекти су написани у јКуери, САСС процесор САСС се користи за описивање изгледа, а популарни веб фонтови су уграђени у функционалност. Сајтови развијени на најновијој верзији боотстрап-а се не приказују исправно у ретко коришћеним верзијама претраживача као што су ИЕ8, ИЕ9 и иОС 6. Важно је напоменути да се роот ем користи као величина фонта за неке елементе. На званичном сајту налазе се детаљни приручници на енглеском и руском језику, примери адаптивног распореда, методе за коришћење уграђених компоненти.

Фоундатион

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

Компоненте се разликују по великом скупу различитих анимацијских ефеката који се могу прилагодити. За управљање стиловима, користи се САСС претпроцесор. Листа основних шаблона садржи клизаче, навигацијске траке, иконе друштвених медија.

Величине се одређују према вредностима датим у табели.

Грид лаиоут

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

У први мах мора бити декларисан контејнер.

дисплаи: грид

Својство грид-темплате-цолумнс се користи за постављање ширине реда, а својство грид-темплате-ровс се користи за ступце. Димензије се могу специфицирати у својству грид-темплате-цолумнс. Ширина трака се мери у јединицама фр, које представљају део расположивог простора у контејнеру. Могуће је користити фк и пк у једном својству. На пример, грид-темплате-цолумнс: 500пк 1фр 2фр.

Закључак

Потпуна пракса адаптивног распореда од А до З укључује употребу максималног броја метода. Да бисте раставили од нуле који је распоред за све уређаје, морате ручно користити упите медија, израчунати величине слика и фонтова. Након добијања одговарајућих вештина, можете почети да користите оквире.