Adaptive aspect al site-ului - detalii și pas - spre deosebire de site-ul de design receptiv, aspect

În scopul de a aspectul site-ului arata bine pe iPhone sau pe tabletă - l) să fie adaptate la aceste dispozitive, și este important să o facă în mod eficient.

Adaptive Aspectul site-ului (uneori numit, de asemenea, dispozitive mobile) - detaliat și pas cu pas tutorial cu privire la modul de a:

Vă rugăm să rețineți că Yandex și Google - au uneltele cu care puteți verifica site-ul de pe adaptabilitate. În noua versiune a Yandex Webmaster este aceasta: instrumente - verifica pagini mobile.

Dacă vrei să știi cum să facă un design de adaptare a site-ului - că acest lucru va fi scris de mai jos și în detaliu în exemple, dar dacă nu au abilități de a lucra cu css - va fi mai dificil.

Receptivă Website Design - își asumă sarcina de lățimea paginii ferestrei și lățimea de coloane și bare laterale în%, în adaptive - în px.

Notă: Dacă aveți un motor de popular pe site-ul dvs., cum ar fi noi WordPress, ei nu au „o durere de cap“ cu un design receptiv - tot ceea ce există câteva clicuri de mouse - ușor de instalat și de a activa plugin-ul și toate). Cum ar fi WP - am folosit WPtouch - foarte bine.

Trebuie să înțelegem că, practic, atunci când adaptive Westcom adesea manipulate: lățime (element de lățime: max-lățime și min-lățime), float (ambalaj în jurul, acesta este îndepărtat prin reducerea lățimii ferestrei), font-size (schimbarea zgârie-nori de litere).

1) În primul rând, trebuie să vă înregistrați o etichetă meta specială pentru diferite tipuri de dispozitive:

2) adaptat parametrilor de pagină (înălțime și lățime):

lățimea containerului. 800px
max-width: 90%;
>

În acest caz, este dat o lățime fixă ​​a containerului, dar nu ar trebui să fie mai mult de 90% din lățimea ferestrei, și este foarte convenabil - în cazul în care site-ul se va adapta la dimensiunea ferestrei.

3) Css aspect adaptiv pentru imagini tot site-ul:

4) dispunerea adaptivă a textului site-ului. în acest caz, manipularea are loc cu o înălțime de text: font-size, și alți parametri.

Acest CSS pentru scriere cu cratimă, în cazul în care nu mai există purtat de cuvinte.

Există o mulțime de greșeli pe dimensiunea fontului: Yandex se bucură de scris - dimensiunea textului este prea mic pentru a citi de pe un dispozitiv mobil - pentru acest caz, după cum urmează:

corp - acest lucru va evita această eroare și trebuie să p tag-ul și link-uri aveți nevoie pentru a pune în jos separat. Este din cauza faptului că tag-ul corpului este în valoare de font-size: 12 sau 14 px - de aceea această eroare iese! Deci, va acest verdict:

5) Adaptarea design 3-coloană, sau 2 aspect coloana - aceasta nu este o afacere mare, în cazul în care face pe div - oh, este de obicei necesar pentru a anula învelitoarea care este pus la nici unul float, iar blocurile vor cădea în jos.

Poziția video. relativă;
padding-bottom. 56,25%;
înălțime. 0;
preaplin. ascunse;
> .video iframe.
.obiect video.
.video de poziție Încorporați. absolută;
top. 0;
la stânga. 0;
lățime. 100%;
înălțime. 100%;
>

Interogările media - Mass-media Cereri

Pentru a crea un design receptiv folosesc adesea interogări media (au stabilit reguli bazate pe dimensiunea lățimii ecranului - în funcție de rezoluția ecranului).

Aici zagotovochka interogări media - sub care permisiunea de a face design adaptiv:

/ * Aparate de mari dimensiuni, Ecrane Wide * /
@media numai ecran și (max-lățime. 1200px)

/ * Dispozitive medie, desktop-uri * /
@media numai ecran și (max-lățime. 992px)

/ * Dispozitive mici, Tablete * /
@media numai ecran și (max-lățime. 768px)

/ * Dispozitive suplimentare mici, telefoane * /
@media numai ecran și (max-lățime. 480 x)

/ * Personalizat, iPhone Retina * /
@media numai ecran și (max-lățime. 320px) / ** /
>

/ * Personalizat, iPhone Retina * /
@media numai ecran și (min-lățime. 320px) / ** /
>

/ * Dispozitive suplimentare mici, telefoane * /
@media numai ecran și (min-lățime. 480 x) / ** /
>

/ * Dispozitive mici, Tablete * /
@media numai ecran și (min-lățime. 768px) / ** /
>

/ * Dispozitive medie, desktop-uri * /
@media numai ecran și (min-lățime. 992px) / ** /
>

/ * Aparate de mari dimensiuni, Ecrane Wide * /
@media numai ecran și (min-lățime. 1200px) / ** /
>

Dar puteți evita interogări media, specificând lățimea coloanelor și a blocurilor imediat în procente.

În cazul în care interogările media începând de sus: tot ce se face este valabilă pentru max-width: 768 va fi declanșată și 480.

Care sunt problemele de adaptare a site-urilor pentru dispozitive mobile

De exemplu, Yandex poate această problemă - există derulare pe orizontală:

Că ai ceva cu umplutură sau o marjă - pentru a reseta selectoare-mamă ale acestora (blocuri) si vei fi fericit.

Iar la sfârșitul Yandex Webmaster arată acest lucru:

De asemenea, a făcut 4:00, este întotdeauna dificil pentru prima dată! Dar apoi, în câteva ore, puteți face! Și a trimis la webmaster să verificați de două ori rapid - este important pentru SEO.