Adaptarea dispozitivului Css prin intermediul @viewportului

Când vrem să customizăm fereastra browserului pe dispozitivul nostru, de obicei folosim o etichetă HTML . Cu toate acestea, destul de ciudat, meta-tag-ul nu este "normativ" - nu este în standardul oficial W3C.







Din moment ce meta-tag-ul de vizualizare este destinat exclusiv pentru personalizarea marcajului, putem spune că este legat în mod corect de CSS. De aceea, W3C caută să standardizeze o nouă metodă de adaptare, în care gestionarea ferestrelor este transferată de la HTML la CSS.

CSS @viewview

Cu noua regulă @viewport, avem același control al ferestrei ca și meta tag-ul, cu excepția faptului că acest control se face exclusiv prin CSS. Ca și în eticheta meta, se recomandă să setați lățimea ferestrei browserului utilizând un dispozitiv independent de dispozitivele de pe dispozitiv:

Până în prezent @viewport folosite de programatori pentru a „modul de completare snap“ în IE10 - Windows 8 facilitate care vă permite să lucreze în modul multi. În mod ironic, IE10 ignoră meta tag-ul, în cazul în care dimensiunea ferestrei este mai mică de 400 de pixeli, ceea ce face imposibilă pentru a optimiza site-uri web folosind această meta-tag-ul, astfel de ferestre mici. Pentru a repara acest lucru, programatorii ar trebui să utilizeze parametrul lățimii dispozitivului menționat mai sus. sau definiți regula @viewport într-o interogare media.







Utilizând @viewport în Media Queries

Putem folosi @viewport în interogări media. De exemplu, următoarea solicitare media este utilizată pentru a ajusta lățimea ferestrei de aspect este mai mică de 400 de pixeli (de exemplu, modul INDEX IE10), în lățime de 320 de pixeli.

În acest exemplu, dacă dispozitivul este setat la un interval de rezoluție de 640 până la 1024 de pixeli, regula @viewport mărește fereastra la 640 de pixeli.

Noi descriptori pentru @viewport

În ciuda faptului că putem controla funcția zoom și zoom, unele proprietăți din fereastra de vizualizare - sau cum se numesc acum "descriptori" - s-au schimbat cu toții.

Descriptorul de zoom este echivalentul scării inițiale din meta-tag. Pe lângă scară minimă și maximă. există descriptori pentru zoom-ul maxim și min-zoom:

Descriptorul de zoom-utilizator este echivalent cu parametrul scalabil de utilizator

Suport pentru browser

Până în prezent, regula css @viewport este acceptată numai de Opera și de IE10. Se pare că în curând browserul Chrome și alte browsere îl vor implementa, pentru că Este de așteptat ca în curând acest meta tag să devină noul standard web oficial.

Pentru moment, trebuie să adăugați prefixul vânzătorului la regula @viewport:

Desigur, trebuie încă să includeți fereastra de vizualizare meta-tag în pagina html, deoarece în viitorul apropiat el nu va merge nicăieri. Dar nu este atât de înfricoșător să privim în viitor - adăugând că regula @viewport face doar site-urile noastre și aplicațiile prietenoase pentru viitor.

Trimiteți acest articol:







Articole similare

Trimiteți-le prietenilor: