Адаптивно оформление на сайта: инструкции стъпка по стъпка с примери

Оформлението е създаването на структурата и дизайна на елементите на уеб страницата. Кодът за писане на уеб страница е дизайнер на оформлението или разработчик на предния край. Той използва графична програма за рязане на оформления, редактор на код, допълнителни програми за ускоряване на процеса.

Какво е оформлението

Кодът на оформлението е скелет на страницата на сайта, написана на езика за маркиране html. Състои се от логически разделени на части от страниците тагове. Всеки от тях отговаря за своята област: меню, сутерен, медии, форми, карти, търсене в сайта, време. Те имат атрибути, с тяхна помощ се идентифицират отделни елементи. Cascading style sheets са отговорни за дизайна, а javascript за динамичните ефекти.

Качественото оформление се показва еднакво във всички браузъри. Резултатът се определя чрез провеждане на серия от тестове. Възможността за работа на повече от една хардуерна платформа се нарича крос-платформа. Съществуват няколко подхода за реализиране на оформлението, като се използват различни рамки.

За създаване на страници по съвременни стандарти се използват различни методи за адаптивно оформление. Това осигурява правилното показване на елементите на всички типове екрани.

Видове оформления

Стандартите непрекъснато се подобряват и в резултат на това се променят начините за разработване на планове. В момента има 3 основни вида страници:

• статично;
• каучук;
• адаптивна.

Статичните оформления са страници, които не могат да променят дизайна си. Техният дизайн не се променя, а размерите на елементите имат ясен смисъл.

Адаптивното оформление предполага, че елементите на сайта ще се приспособят към размера на екрана на използваното устройство. Когато ширината на документа се промени, блоковете се възстановяват, някои части се заменят с други, някои елементи изчезват. Идеята за адаптивност замени мобилните версии на сайта, живеещи на отделни поддомейни. Основният принцип за създаване на адаптивност е да се разработи дизайн за три екрана: компютър, таблет, смартфон.

При създаването на гумено оформление се взема под внимание и оразмеряването на екрана и всички елементи се регулират. Основната разлика от адаптивното е, че оформлението се разширява или свива под екрана при всеки момент на промяна.

Проверете кои от използваните принципи, както следва. Ако при разтягане на прозореца на браузъра се разгъне страница заедно с нея, това е каучуково оформление. Когато страницата на сайта се промени само на няколко позиции, това означава, че тя е адаптивна.

Размери за адаптивно оформление

За да се създадат адаптивни оформления, се използват относителни мерни единици вместо стандартния статичен px. Най-често срещаните:

• ем;
• вещни;
• %.

В адаптивното оформление на html, em се използва за задаване на размери на шрифт и отстъп. По подразбиране 1 em е 16 пиксела. Съответно, за да зададете шрифта за параграф p с размер от 32 пиксела, трябва да посочите следното:

п

размер на шрифта: 2em;

}

Особеността на използването на единицата е, че 1em е равен на размера на шрифта на неговия елемент. Това означава, че 1em приема различни стойности в различните части на кода. Например, в блок, където размерът на шрифта е 2em (32px), маржът в 1em ще бъде 32 пиксела. Но когато шрифтът е 1em (16px), подложката в 1em ще бъде равна на стандартните 16 пиксела.

Rem - root em, който е дефиниран в маркера , 1 root-em, за разлика от 1em, се равнява на един номер при никакви обстоятелства. Стойността се променя само когато промените са принудени.

Процентът обикновено се използва за задаване на ширината на блокове или изображения. Независимо от размера на екрана, тя ще съответства на зададената стойност, например 80%.

Медийни запитвания

CSS включва поддръжка на различни технически параметри на устройството. Определя се смартфон с разширение на малък екран, свойството на стила се показва под неговата стойност. Медийните запитвания разкриват разлики в ориентацията: портрет и пейзаж. Широко използван за създаване на адаптивно оформление. Оформление, за да се адаптира към посоченото разделителна способност на екрана структурата на документа се променя в съответствие с кода.

Определени типове устройства:

• Брайлови уреди и принтери, щамповани за слепи;
• конвенционални принтери;
• екран за монитор;
• реч синтезатори;
• ТВ ТВ.

В стойността на името на заявката има няколко условия. Например, показване на съдържанието само за мониторни екрани и само максимална ширина от 600 пиксела. Изглежда така:

@media екран и (max-width: 600px) {изходен код}.

Адаптивният дизайн се основава на използването на медийни заявки. Той създава оформление за екрани с минимална ширина 1200 пиксела, тялото на кода се поставя в @media екран и (max-width: 1200px) {}. След това се създава блок за екрана @media и (min-width: 700px) tablet {} и @media екран и (макс ширина: 699px) {} мобилни устройства.

Първо мобилни устройства

Според последните показатели, от мобилни устройства и таблети до интернет идват много по-често, отколкото от компютри. Съответно мобилният трафик става по-смислен за уебсайтовете. Поради такива функции като малък размер на екрана, потребителите на притурки предпочитат сайтове от първите редове на резултатите от търсенето, прекарват по-малко време в търсене на информация.

Подходът на Mobile First включва показване на най-важното съдържание, лесен и оптимизиран уебсайт, отказ да се изтеглят други ресурси.

Адаптивното оформление на сайта съгласно тази методология предвижда първоначално създаване на страница за малки екрани и последващо добавяне на елементи, както се изисква от дизайна на страницата за голям монитор. Въпреки прозрачността на подхода, клиентите и изпълнителите полагат големи усилия за пълно преразглеждане на обичайния метод за разработване на сайта.

за първоначално зареждане

Една от популярните рамки, които дадоха прост отговор на въпроса как да се направи адаптивно оформление е Twitter Bootstrap. С помощта на мрежа за първоначално зареждане от 12 колони се създават уебсайтове, които веднага се показват правилно по подразбиране на екраните на мобилните устройства. Основните използвани инструменти са:

• предварително определена ширина на колоните, която може да определи ширината на елементите;
• компоненти за фиксирани и гумени документи;
• вградени шрифтове и класове за тях;
• Средства за проектиране на таблици;
• дизайн класове в лентата с инструменти на менюто.

Динамичните ефекти са написани в jQuery, SASS за препроцесор SASS се използва за описание на външния вид, а популярните уеб шрифтове са вградени във функционалността. Сайтовете, разработени на последната версия на bootstrap, не се показват правилно в рядко използвани версии на браузъри като IE8, IE9 и iOS 6. Забележително е, че root em се използва като размер на шрифта за някои елементи. Официалният сайт има подробни ръководства на английски и руски език, примери за адаптивно оформление, начини за използване на вградени компоненти.

фундамент

Фондацията е мощна рамка, един от основните конкуренти на Twitter Bootstrap. Той поддържа всички размери решетки, има редица предимства, които липсват в Bootstrap.

Компонентите се отличават с голям набор от различни анимационни ефекти, които могат да бъдат персонализирани. За управление на стилове се използва SASS препроцесор. Списъкът с основни шаблони съдържа плъзгачи, ленти за навигация, икони на социалните медии.

Размерите се определят от стойностите, дадени в таблицата.

Оформление на мрежата

Друга система, която заслужава внимание, е оформлението на мрежата. Това е набор от пресичащи се вертикални и хоризонтални линии. Те образуват колони и редове. Елементите се поставят в мрежа, размерите им се посочват в съответствие с редове и таблици. Възможно е да се използват фиксирани размери, като px, и гъвкави - проценти, rem и em.

На първо място трябва да се декларира мрежовият контейнер.

дисплей: решетка

Свойството grid-template-columns се използва за задаване на ширината на реда, а свойството grid-template-rows се използва за колони. Размерите могат да бъдат определени в едно свойство grid-template-columns. Ширината на лентите се измерва в единици fr, които представляват частта от наличното пространство в контейнера. Възможно е да се използват fx и px в едно свойство. Например, grid-template-column: 500px 1fr 2fr.

заключение

Пълната практика на адаптивно оформление от А до Z включва използването на максималния брой методи. За да разглобите от нулата кое оформление е за всички устройства, трябва ръчно да използвате медийни заявки, да изчислите размерите на изображенията и шрифтовете. След получаване на подходящите умения можете да започнете да използвате рамки.