Респонсив дизайнът без съмнение е нещо значимо в последно време. Ако не сте запознати какво точно е responsive (адаптивен) дизайн, накратко можем да споменем, че това е уеб дизайн с цел оптимален и добре изглеждащ вид, подходящ за гледане през различни устройства с различна резолюция (настолни компютри, таблети, мобилни телефони и др.).
Идеята е да се постигне лесно четене и навигация с минимално оразмеряване и скролиране от страна на потребителите. За начинаещите понятието адаптивен дизайн може да изглежда леко неясно, но всъщност не е толкова сложно да се приложи. В следващите редове сме ви приготвили 3 лесни стъпки за усвояване на адаптивния дизайн (стига да имате познания по CSS).
Стъпка 1. Мета таг
Повечето мобилни браузъри оразмеряват HTML страниците за да се съберат на дисплея. Можете да използвате viewport мета тага за да контролирате това.
Този таг нарежда на браузъра да използва ширината на устройстото и забранява първоначалното мащабиране. Включете този таг в head частта на кода.
Internet Explorer 8 или по-стари версии не поддържат media query. Можете да използвате media-queries.js или respond.js за да добавите media query подръжка в IE.
Стъпка 2. HTML структура
В този пример имаме обикновена страница с хедър, контейнер със съдържание, сайдбар и футър. Хедърът има фиксирата височина 180px, контейнерът със съдържание е 600px широк и сайд барът е 300px широк.
Стъпка 3. Media Заявки
CSS3 media заявка е трикът за адаптивен дизайн. Това е като да пишеш If условни оператори с цел да покажеш на браузъра как да рендва страница със специфични размери.
Следващите няколко правила ще важат ако резолюцията е 980px или по-малка.
/* for 980px or less */
@media screen and (max-width:980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
За резолюция 700px или по-малка, поставяме width: auto на #content и #sidebar и премахваме float, за да се изобразят с пълна ширина.
/* for 700px or less */
@media screen and (max-width:700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
За 480px или по-малко (екран на мобилен телефон), променяме #header височината на auto и размера на шрифта на h1 така на 24px. Също така скриваме #sidebar.
/* for 480px or less */
@media screen and (max-width:700px) {
#header {
height: auto;
}
#h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
Тук може да има както долна така и горна граница на ширината в една media заявка, например:
@media screen and (min-width: 480px) and (max-width: 767px) {
Можете да напишете колкото искате media заявки, въпреки че ние показахме само 4. Целта на media заявките е да приложи различни CSS правила за да се постигнат различни изгледи според различната резолюция, което е и същността на адаптивния уеб дизайн. Media заявките могат да бъдат както в един и същ stylesheet така и в различни.
Ако искате да проверите как изглежда сайта ви на различни мобилни устройства, можете да имползвате уеб базирания инструмент Screenfly.
Тази статия е предназначена да покаже най-основните неща свързани с респонсив дизайн. Следете блога ни за още информация по темата.
Светослав Стоянов
Latest posts by Светослав Стоянов (see all)
- Места за посещение в Родопите - август 25, 2020
- Вижте обновения сайт на списание „Органично“ - юни 6, 2014
- Продуктите на Shock Doctor вече и на българския пазар! - февруари 20, 2014
