Css3, interfețe mobile

Dacă ați lucrat vreodată în Internet este mai mult sau mai puțin o lungă perioadă de timp de la un dispozitiv mobil, fără îndoială, a constatat că ecranul este mic (indiferent cât de mare nu a fost pentru dispozitivul mobil) - nu cel mai bun fereastră în Internet.







Din nou, crearea de versiuni separate ale site-ului pentru fiecare tip de dispozitiv mobil nu este singura modalitate de a rezolva problema diferitelor dispozitive mobile. O altă abordare este dezvoltarea unui cod de server web care examinează fiecare solicitare, calculează browserul care a trimis această solicitare și trimite conținutul formatului corespunzător. O astfel de decizie este cu siguranță mare, dar numai dacă aveți timp și abilitățile necesare.

Dar ar fi minunat să avem un mecanism simplu care să se adapteze la stilul paginilor web pentru diferite tipuri de dispozitive, fără a necesita nici o infrastructură, aplicații web sau cod de tip server-side.

Solicitări de capacități de afișare

Principiul cererii de capabilități se bazează pe obținerea informațiilor cheie despre dispozitivul pe care este vizualizat o pagină web, cum ar fi, de exemplu, dimensiunea ecranului, rezoluția, capacitățile de reproducere a culorilor și altele asemenea. Pe baza acestor informații, puteți aplica diferite stiluri de formatare sau chiar puteți conecta foi de stil complet diferite. Rezultatele cererilor de capabilități sunt prezentate în cifrele de mai jos:

Css3, interfețe mobile

Css3, interfețe mobile

Destul de interesant, creatorii CSS au încercat să rezolve problema diferitelor tipuri de dispozitive de redare în CSS 2.2 utilizând tipurile de suporturi media. Este posibil să utilizați deja acest standard pentru a furniza foi de stil diferite pentru afișarea conținutului pe diferite dispozitive, după cum se arată în următorul cod:

Atributul media deține, de asemenea, valoarea handheld, destinată dispozitivelor mobile cu ecran mic și conexiune la viteză redusă. Cele mai multe dispozitive mobile încearcă să acorde atenție atributului media și să utilizeze foaia de stil handheld, dacă există. Dar această abordare este plină cu diverse defecte și atribute mass-media oportunități sunt foarte limitate pentru a fi utilizate cu o gamă largă de dispozitive care sunt conectate la Internet în acest moment.

Pentru a utiliza interogări despre caracteristici, este mai ușor să începeți cu o versiune standard a unui site Web și apoi să înlocuiți anumite părți ale marcajului. În exemplul de mai sus, conținutul paginii este împărțit în două blocuri:

O foaie de stil începe cu două reguli, câte unul pentru fiecare bloc:

Aceste reguli implementează un aspect standard în două coloane, unde coloana cu o lățime fixă ​​de 330 de pixeli este în partea stângă, iar bara laterală plutitoare ocupă tot spațiul rămas în partea dreaptă.

Trucul este definirea unei părți separate a foii de stil care este activată pentru o anumită valoare a interogării capabilității. Sintaxa acestei definiții este:

În acest exemplu, acest nou set de stiluri este activat atunci când lățimea ferestrei browserului devine 480 pixeli sau mai puțin. Acest lucru înseamnă că în foaia noastră de stil avem nevoie de o secțiune care arată astfel:

În prezent, cele mai populare proprietăți întrebări despre posibilitățile sunt max-dispozitiv-lățime (pentru a crea versiuni mobile de pagini web), max-lățime (pentru utilizare în stiluri diferite, în funcție de dimensiunea actuală a ferestrei browser-ului) și orientarea (pentru a schimba aspectul paginii în în funcție de locația dispozitivului - orizontală sau verticală).







Deși puteți introduce orice în interiorul blocului de cereri pentru capabilități, în acest exemplu, pur și simplu adăugați noi reguli de foi de stil pentru elemente

și