interogări media

Deci, în acest articol vom atinge pe un subiect foarte interesant de creare de pagini HTML adaptive folosind interogări media CSS.

Ceea ce, în general, este interogări media CSS? Aceste aceleași întrebări sunt încadrate într-o anumite coduri de sintaxă care se aplică numai în cazul în care ecranul utilizatorului corespunde cu starea cererii.

Aici este un exemplu de interogare:

Ecranul @media și (max-width: 600px) fundal corp: #ccc;
>
/ * Codul dvs. CSS * /
>

Într-o astfel de cerere poate fi orice număr de elemente care sunt supuse la orice număr de proprietăți, iar acestea vor fi activate numai atunci când starea unei interogări mass-media. Acest sistem amintește operatorului său standard de principiu, în cazul în care ()<>, care este disponibil în cele mai multe limbaje de programare. Ca și în cazul în cazul în care, interogări mass-media poate avea mai multe condiții pentru a efectua CSS imbricate. De exemplu:

@media ecran și (600px-min lățime.) și (max-width: 1000px) fundal corp: #ccc;
>
/ * Codul dvs. CSS * /
>

Imediat evident că va fi efectuată dacă lățimea ferestrei de vizualizare 600 până la 1000 de pixeli.

Pe măsură ce ponilis deja cerere adjunct construit după cum urmează:

@media ecran și (condiție) / * cod * /
>

Ați observat, probabil, ecranul cuvânt. Înseamnă ceva de genul tipul de dispozitiv în cazul în care producția merge. Cu toate acestea, cu excepția ecran acolo: toate, proiecție, TV, print, 3D ochelari. Pentru monitoare, jucătorii acest ecran. deci cu el noi exemple. În general, este mai bine să pună în aplicare toate (la toate), dacă nu sunteți sigur ce să răsfira un utilizator deschide aplicația sau jocul, sau ce ai.

Scrieți interogări, puteți ambele fișiere css, și în pagini HTML. Mai mult, puteți în HTML, puteți crea o condiție de interogare mass-media sub care va fi conectat fișierul:

Acesta este fișierul care este conectat în cazul în care densitatea pixelilor va fi 2. Acesta este utilizat în principal pentru a identifica al patrulea iPhone.

În acest mod, puteți scrie un CSS fișiere separate pentru orientarea portret sau peisaj:

Acesta este utilizat de mulți dezvoltatori web.

Cu acest sortate. Să vedem ce interogările pot fi folosite, în general, și de a lucra în browserele moderne.

CSS interogări media

Acum vom vedea ce interogări media CSS Încercați-ne mai des și s-ar putea veni la îndemână.

listă de proprietăți care urmează să fie scrise cu setări fictive pe care le înțeleg ce valori pot include o anumită caracteristică:

min-width: 100px - Lățimea minimă a ferestrei
max-lățime: 35em - Lățimea maximă a ferestrei
max-device-width: 480 x - Lățimea maximă a dispozitivului (în pixeli)
Dispozitiv de lățime: 768px - Lățimea dispozitivului
Dispozitiv de raport de aspect: 9/16 - Raport de aspect
orientare: peisaj - orientarea peisaj
orientare: portret - Orientare Portret
rezoluție: 96dpi - densitate a ecranului
min-rezolutie: 192dpi - densitate minimă ecran
-webkit-dispozitiv-pixel-raport. 75 - densitate ecran Coeficient (în exemplu, valoarea 0,75)
-webkit-min-device-pixel-ratio: 1.3 minimă de densitate a ecranului raport

Despre ultimul parametru Vreau să vorbesc un pic. Ar trebui să adaug că rezoluția devine instabilă. Unele dispozitive nu iau în mod corespunzător cererea. Dar -webkit-dispozitiv-pixel-raport este raportul real al densității pixelilor ecranului convențional joasă densitate este un ecran de 0,75, și 2 este Retina.

P.S. Dacă doriți să verificați rapid ceea ce interogări CSS funcționează cu dispozitivul, și că acestea dau de fapt, atunci accesați această pagină pe dispozitiv.