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

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

Adaptive оформлението на сайта (понякога наричан също подходяща за мобилни устройства) - подробно и стъпка по стъпка ръководство за това как да:

Моля, имайте предвид, че Yandex и Google - имат своите инструменти, с които можете да проверите на сайта на адаптивност. В новата версия на Yandex Webmaster е това: инструменти - проверяват страници за мобилни устройства.

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

Отзивчиви Уебсайт Дизайн - поема задачата на ширината на страницата на прозореца и ширината на колони и странични ленти в%, в адаптивния - в пиксела.

Забележка: Ако имате популярен двигател на вашия сайт, като ни WordPress, те не разполагат с "главоболие" с адаптивен дизайн - всичко има няколко кликвания на мишката - лесен за инсталиране и активиране на приставката и всички). Такива като WP - аз използвах WPtouch - много добра.

Ние трябва да разберем, че в общи линии, когато адаптивна Westcom често манипулирани: (широчината елемент: макс ширина и мин ширина), поплавък (обвиване, тя се отстранява чрез намаляване на ширината на прозореца), размер на шрифта (небостъргач промяна на писма).

1) На първо място, трябва да се регистрирате специална мета тагове за различни видове устройства:

2), пригоден параметри страница (височина и ширина):

ширина контейнер. 800px
макс ширина: 90%;
>

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

3) Css адаптивно оформление за снимките в целия сайт:

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

Това CSS за сричкопренасяне, ако има вече не извършва с думите.

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

тяло - това ще избегнете тази грешка и трябва да стр тагове и връзки, което трябва да остави отделно. Това се дължи на факта, че тялото маркер е на стойност размер на шрифта: 12 или 14 пиксела - ето защо тази грешка идва! Така че това ще присъда:

5) адаптиране на дизайна на 3-колона, или 2 оформление колона - това е не е голяма работа, ако се прави на DIV - о обикновено е необходимо, за да отмените обвивка, която се поставя поплавък на висота и блоковете ще паднат надолу.

видео позиция. относителна;
подложка дъно. 56.25%;
височина. 0;
преливник. скрито;
> .video рамка.
.видео обект.
.вграждане на видеоклипа позиция. абсолютна;
отгоре. 0;
наляво. 0;
ширина. 100%;
височина. 100%;
>

Медийни Заявки - Запитвания от медиите

За създаване на адаптивен дизайн често използват медийни заявки (те определят правилата, въз основа на размера на ширината на екрана - въз основа на резолюцията на екрана).

Тук zagotovochka медийни заявки - при които разрешение за адаптивен дизайн:

/ * Големи устройства, Широки екрани * /
@media само екран и (макс ширина. 1200px)

/ * Средно устройства, настолни * /
@media само екран и (макс ширина. 992px)

/ * Малки устройства, таблети * /
@media само екран и (макс ширина. 768px)

/ * Допълнително малки устройства, телефони * /
@media само екран и (макс ширина. 480px)

/ * По поръчка, iPhone Retina * /
@media само екран и (макс ширина. 320) / ** /
>

/ * По поръчка, iPhone Retina * /
@media само екран и (мин ширина. 320) / ** /
>

/ * Допълнително малки устройства, телефони * /
@media само екран и (мин ширина. 480px) / ** /
>

/ * Малки устройства, таблети * /
@media само екран и (мин ширина. 768px) / ** /
>

/ * Средно устройства, настолни * /
@media само екран и (мин ширина. 992px) / ** /
>

/ * Големи устройства, Широки екрани * /
@media само екран и (мин ширина. 1200px) / ** /
>

Но вие можете да избегнете медийни заявки, като се посочва ширината на колоните и блокове веднага в проценти.

Когато медийни заявки, започвайки от върха: всичко, което се прави, е валидна за макс ширина: 768 да се задейства и 480.

Какви са проблемите на адаптация на сайтове за мобилни устройства

Например Yandex може този въпрос - има хоризонтално превъртане:

Че има нещо с пълнеж или марж - за да нулирате своите селектори майки (блокове) и ще бъдете щастливи.

И в края на Yandex Webmaster показва това:

Също така направихме 04:00, винаги е трудно за първи път! Но след това, в рамките на няколко часа, можете да го направите! И изпратена до уеб администратора, за да проверите, че бързо - това е важно за SEO.