Какво е адаптивен уеб дизайн и защо е необходим?
В блогове и форуми периодично срещам такова понятие като адаптивен уеб дизайн и хора, които питат какво е това. Реших да обобщя малко.
Wikipedia определя тази концепция като дизайн, с помощта на който се постига "отлично възприятие на различни устройства". Самият аз не разбрах формулировката, защото очевидно възникват въпроси.
В действителност всичко е по-просто: този термин се отнася до създаването на такива сайтове, които ще се показват по различен начин в различни устройства - на широк монитор, на обикновен екран, на таблет и на мобилен телефон.
В същото време адаптивността не трябва да се бърка нито с просто гумено оформление, при което DIV оформлението е направено по такъв начин, че страницата просто се простира до ширината на дисплея, нито със създаването на мобилни версии на сайтове, които най-често се намират на отделен поддомейн като m.vashsayt.ru.
Отзивчивостта се дефинира основно чрез дефиниране на различни CSS свойства в зависимост от разделителната способност на дисплея — като се използва заданието за условие на екрана @media и css свойства min-device-width, max-device-width.
Ето примерен код за създаване на адаптивна страница - тя ще се показва по различен начин на обикновен монитор с резолюция 1200 пиксела и на дисплей на мобилен телефон с резолюция 640 пиксела:
@media screen and (max-width: 1200 px) { /* начало на условието */
#main { /* съдържанието ще бъде отляво */ ширина: 75%; float: ляво;}
#sidebar { /* страничната лента ще бъде отдясно */ ширина: 25%; float: надясно;}
} /* край на условието */
@media screen and (max-width: 640px) { /* начало на условието */
#main { /* съдържанието ще се простира до целия екран */ ширина: 100%; }
#sidebar { /* страничната лента ще бъде позиционирана от нов ред */ ширина: 100; }
} /* крайусловия */
Като цяло, време е да изхвърлите старите методи и да спрете да използвате интервалния таг в html, а вместо това да преминете към CSS и responsive технологии! Основното нещо е да не забравяте да проверите сайта за валидност))