Ние започваме да се развива адаптивно оформление, alexdev

Най-накрая реших да започна развитието на адаптивни оформление.

Така че, това, което е най-адаптивни оформление?

"Адаптивен уеб дизайн (на английски адаптивен уеб дизайн.) - уеб страница дизайн, който осигурява отлична демонстрация на даден сайт на различни устройства, които са свързани с Интернет."

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

Всеки ден, адаптивно оформление е все по-популярни. Адаптивни сайтове се появяват все повече и повече.

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

За да започнете, опитайте се да се създаде един нормален образ, който ще се разпростират на територията на целия екран.

Изключително прост. Просто увит изображение в контейнер.

Зададохме ширината на изображението, равна на ширината на DIV на контейнера. Поради това, в случай че намаленият DIV. след това намалява IMG.

В резултат на това, ние получаваме един образ, който се разтяга, за да запълни екрана, дали екранът е 320 * 240 пиксела или екран с разделителна способност от 1920 * 1080 пиксела.

Максимална и минимална широчина

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

За да се реши този проблем ние определяме образа на определена максимална и минимална ширина.

Сега контейнера и следователно изображението ще се променя в разумни граници от 500 до 1000 пиксела в ширина.

Фотогалерия

И сега се опитват да създадат minigalereyu.

Ние ще използваме най-вече са известни принципи за нас.

В HTML ние просто добави няколко изображения и обви всичко в един DIV.

Всяко изображение в галерията сега ще се промени размера си в зависимост от контейнера. Също така добавихме малко тире от 1% от всяка страна на красотата.

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

Но това не е всичко.

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

Но това може да се коригира, но как - ще научите в следващата статия! 😉

Благодаря ви за вниманието!

Абонирайте се за бюлетина 😉