Cum se introduc cererile media? CSS - adaptabilitate în trei etape

interogări media au fost introduse în caietul de sarcini CSS3, decide dureri de cap vechi de web-developeri: controlul nativ de stiluri CSS, în funcție de specificațiile dispozitivului special, și schimbarea lină a stilului atunci când dimensiunea ferestrei browser-ului.

Interogări media în CSS: 5 minute adaptate

În cuvinte simple, interogarea media - acest design, care să permită, sub rezerva anumitor condiții, pentru a alege care stilul de a utiliza pe pagina. De exemplu, în cazul în care lățimea ferestrei browser-ului peste 1024px, vom afișa un meniu complet, se întind pe întreaga lățime a paginii, și în cazul în care mai puțin de 1024px - ascunde (de exemplu, folosind afișajul de proprietate: nici una;) și arată în schimb meniul „Burger“, când faceți clic pe care este afișată o listă elegantă (afișare: bloc-)

Deci, cea mai simplă interogare CSS media va arăta astfel:

.meniu {display: block-}
.burger-menu { afișare: niciunul; }

@media all și (max-width: 1024px) {

.meniul { afișare: niciunul; }
.meniul burger {display: block-}

}

Literalmente, puteți citi acest lucru: vom afișa întotdeauna meniul standard și a ascunde meniul „burger“, dar, în cazul în care fereastra de browser-ul este mai puțin de 1024 de pixeli (max-width: 1024px înseamnă „până la o lățime maximă de 1024px“), atunci ne ascundem vechile meniuri și arată noi. Proprietățile din interogarea media vor fi suprascrise de cele existente. Se va lucra ca atunci când deschideți pagina de la un telefon mobil sau pe tabletă, precum și cu o scădere treptată în fereastra browser-ului atunci când ne transforma în cutie și a apucat una dintre părțile laterale și trageți prin reducerea dimensiunii sale.

Aproximativ astfel încât cererea poate arăta în editorul dvs.:

Dacă aveți suficientă privire la o scurtă trecere în revistă a interogărilor media în CSS, atunci puteți să le exersați cu ușurință și să verificați acțiunea pe site-ul dvs., instalându-vă pe acesta Întrebări media CSS. De asemenea, dispozitivele mobile vă recunosc cu ușurință noile stiluri, dacă nu uitați să specificați fereastra de vizualizare meta-tag, pe care o vom discuta mai detaliat. Cu toate acestea, vă recomandăm să aflați mai multe despre proprietățile lor, să aflați despre asistența browserului, să consultați mai întâi mobilul și desktopul.

Sprijin pentru interogările media

Poate că aceasta este o problemă cheie pentru cei care se gândesc serios despre vizitatorii site-ului dvs. și se străduiește să facă cât mai accesibilă pentru toată lumea. Din fericire, interogările media au fost menținute foarte bine și funcționează bine în browsere moderne, începând cu cele mai problematice Safari 4 și Internet Explorer 9. Dacă aveți într-adevăr pentru a sprijini Internet Explorer 8, vă puteți conecta la pagina de populare sau script-ul respond.js CSS3-mediaqueries. js.

Instalarea corectă a suportului media CSS pentru dispozitive mobile

Pentru ca totul să funcționeze așa cum ar trebui, este important să nu uitați să îl setați în antet document eticheta pentru vizualizarea documentului. Acest lucru se face după cum urmează:

Astfel, pe ecranele dispozitivelor mobile cu o densitate mare de pixeli este setată corect în raportul dintre CSS menționat și numărul efectiv de pixeli, iar site-ul va fi scalată. Și nu mai este o întrebare, de ce mass-media nu lucrează cu CSS.

Adaptabilitate elegantă

Principala sarcină a interogări media - face site-ul adaptiv, care este de a „preda“, se adaptează automat la orice formate și dimensiuni de ecran. Acest lucru se poate face în două moduri.

Pentru a desemna solicitările CSS pentru mass-media ca anumite puncte-cheie, care se referă cel mai adesea la formatele populare de dispozitive. De exemplu, cea mai simplă versiune: 320px - telefoane, 768px - tablete, 1024px și peste - laptopuri și computere personale. Și la fiecare dintre aceste puncte, schimbați dimensiunile fixe ale blocurilor (precum și orice alte obiecte, cum ar fi video sau imagini).

A doua modalitate - de a face o tranziție lină „de cauciuc“ între mai multe puncte, stabilind elementele de pe pagina nu sunt dimensiuni stricte în pixeli, iar dimensiunea ca procent. În acest caz, de exemplu, în meniul de mai sus și 1024px unitatea va ocupa 50% din pagina redusă lin, împreună cu dimensiunea ferestrei browser-ului la 768px, și după - întins până la 100% din portul de vizualizare.

Merită menționat, de asemenea, mai întâi despre primul și mobilul de pe mobil, diferit în abordarea interogărilor de construire. În primul caz, descriem mai întâi regulile pentru toate dispozitivele, inclusiv laptopurile și computerele personale, apoi reconstruim treptat site-ul și eliminăm elementele suplimentare ale paginii. În al doilea - pregătește mai întâi un aspect site-ul pentru dispozitive mobile, apoi extinderea ferestrei browser-ului și apariția de spațiu liber pentru a le plasa restul de conținut.

Trucul comandantului: specificați media css - regulile din link-ul tag-ului!

Puțini știu, dar nu este necesar să scrieți interogări direct în stilurile CSS, le puteți specifica direct atunci când conectați fișierul, direct în etichetă . Fișierul va fi conectat în funcție de faptul că pagina corespunde criteriilor specificate în proprietatea media. În mod similar, îl puteți folosi când importați stiluri din alte fișiere utilizând @import.

În concluzie, trebuie remarcat faptul că multe biblioteci populare utilizate în dezvoltarea site-urilor conțin analogii încorporate de interogări media. Nu trebuie să le neglijezi. De exemplu, Bootstrap vă permite să înregistrați în clasele HTML-cod, prin care unitățile se va ajusta în mod automat atunci când modificați dimensiunea ecranului, dar nu va fi în măsură să controleze flexibil procesul, iar site-ul va fi întotdeauna împărțite în mod rigid în 12 coloane. La urma urmei, numai cu ajutorul lor puteți crea un site care să fie cât mai flexibil posibil pentru a vă adapta la orice dispozitiv, în timp ce vă aflați complet sub control.