Cum să adaptați un site pentru dispozitive mobile, un design adaptat al site-ului web și un șablon de site adaptat. Recent, aceste întrebări sunt de interes pentru fiecare programator, care are deja propriile site-uri și este necesar să fie mereu la curent.
Primele două exemple de cod css:
În primul rând, pentru ca site-ul să fie ajustat pentru dispozitive mobile, este necesar să se introducă între câmpuri
Aici este:Această linie spune browserului că stilurile sunt setate în stilurile CSS pentru diferite rezoluții ale ecranului.
În loc de un bloc, aveți două. În funcție de ceea ce ați vizitat site-ul, în codul CSS este ascuns.
Dacă dimensiunea ecranului este mai mare de 1020px, stilurile mobile # sidebar1_mobail nu vor fi afișate dacă mai puțin de 1020px va fi ascunsă bara principală # 1. și afișare mobilă.
Stilurile pot fi atribuite unei dimensiuni diferite, în funcție de dimensiunea site-ului dvs. Este necesar să inserați blocuri suplimentare pe paginile care vor fi afișate atunci când versiunea mobilă este afișată, dar când nu este una completă.
Dacă bara laterală are o indentare, de exemplu, de la marginea din stânga a blocului părinte - margin-left: 590px; atunci distanța este, de asemenea, calculată prin formula și pusă în procente. Astfel, conținutul și bara laterală se vor adapta dimensiunii ecranului.
Pe ecrane mici, bara laterală va arăta prost, trebuie să o mutați în conținut și să întindeți conținutul la întreaga lățime a ecranului.
Cele două opțiuni sunt pe deplin operaționale.
Asta e tot! Acum știi cum să adaptezi site-ul pentru dispozitivele mobile, care este mai potrivit pentru tine, alege-te.
Articole similare
-
Pesimizarea site-ului în Yandex și Google, un site de la zero
-
10 moduri de adaptare a site-ului dvs. pentru dispozitive mobile, utilizabilitate
Trimiteți-le prietenilor: