Адаптивни оформление страници на сайта - като ръководство да направи примерите, като част от проект

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

Какво е адаптивна оформлението на страницата

До сравнително скоро, при приближаване на много обекти в долната част на браузъра ви, можете да видите на плъзгача, осигурявайки превъртате хоризонтално страница. Това се случи, например, ако прозорецът на Internet Explorer не е минимизиран, и това е една сравнително малка площ. Също така то би могло почти винаги се вижда, когато разделителната способност на екрана, която извежда изображение е 800, като 600 или, особено, 640 х 480 пиксела.

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

Защо и кога ще има адаптивен дизайн?

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

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

Малко по-късно, друг уеб дизайнер и известен podcaster предложи допълнения към концепциите на които казаха на колегата си.

Пак посредством и как да създадете адаптивно оформление?

CSS3 - ново поколение от Cascading Style Sheets. Тази технология е предназначена за създаване на правилата за показване на елементи на страницата в браузъра на потребителя. С помощта на това можете да определите, например, подходящия размер на клетка в определен резолюция на екрана на потребителя, или да зададете правилото, че човек трябва винаги да взема определен процент от пространство (100% - със запълване на работното място браузъра).

Тя е в третото поколение се появи CSS правило "медийни заявки", с помощта на който програмист да създадете отделни класове за всяка резолюция.

Много важен момент!

Лице, което възнамерява да използва CSS3 за оформление адаптивен дизайн, трябва да сте наясно, че, за разлика от CSS2, а не пиксела, а процентите, използвани в третото поколение на Cascading Style Sheets, за да определите размера на обектите.

Що се отнася до HTML5, а след това с негова помощ тя се извършва директно на оформлението на страницата, т.е. държави, в които трябва да се поставят на определени елементи. Обектите, за да се приспособи към резолюцията в параметъра HTML тагове е уточнен предварително с помощта на класове CSS3.

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

За да се разбере какво е адаптивно оформление, примери трябва да бъдат възможно най-прости. Ето защо, ние разгледа делото, в което подготвената изображението се настройва автоматично за да се поберат работното пространство на браузъра.

Започнете с пост HTML елемент на самата страница:

Мета DIV - показва, че всичко, сключен в него, е отделна единица. Когато "клас" атрибутите точки към страница много блокове. Необходимо е да се разбере, браузъра, който владее да се прилага за определен блок.

Сега просто трябва да се създаде самото правило, така наречените,

В този код, просто е определил правата за адаптивно оформление. В частност, той посочи, че ширината (Wight) винаги трябва да добавите до 100% от ширината на работното пространство на уеб браузър, докато височината (височина) се настройва автоматично.

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

Можете да направите още по-лесно. За да проверите дали адаптивен дизайн работа, трябва да задръжте натиснат клавиша CTRL, след което кликнете върху "+" или "-". След тази операция, страницата трябва да се увеличава или намалява съответно, но елемента, към който приложните адаптивни оформление, запази съотношението на размерите му (или правя нещо друго, нещо, което е посочено в правилата).

Инструменти, които опростяват оформлението на адаптивен дизайн

Адаптивен дизайн оформление - много отнемаща време задача. Следователно, за да се намали времето за изпълнение на тези процедури, по-добре е да се използват специални инструменти. Като един от тези могат да бъдат споменати известен рамка Bootstrap *.

Този набор от инструменти за HTML и CSS, например, включва голям брой готови шаблони класа, които могат да се използват при разработването на дизайна. Той също така съдържа динамични оформления, които са в съответствие с всички нормативни документи и стандарти позволяват създаването на адаптивни елементи.

За да започнете да използвате това е необходимо, на първо място, за да получат знания за себе си директно на HTML5 и CSS3, и след това да проучи характеристиките на рамката. Въпреки това, за да се разбере повече от тънкостите на работата с него, след което можете да многократно се намали времето за развитие на адаптивното дизайн на уеб сайтове.

* За първоначално зареждане - софтуерът е с отворен код, разработен от Corporation Twitter Inc. Разпространява безплатно и е с широка общност, която винаги е възможно да попитам за съвет.

Сподели статията: