Informații articol
Interogări media, funcția care vă permite să specificați afișarea unui document
Începând din 2012, interogările media au fost un standard pentru web design.
Interogările media sunt o funcție CSS3. Acestea vă permit să specificați afișarea unui document în diferite suporturi de ieșire și dimensiuni de ecran.
Afișajul e reglat în funcție de anumite condiții, cum ar fi tipul suportului, orientarea ecranului sau rezoluția.
Începând cu luna iunie a anului 2012, interogările media sunt un standard pentru web design WordPress.
Acestea sunt recomandate de World Wide Web Consortium (W3C).
La ce se utilizează interogările media?
O parte esențială a proiectării sensibile este crearea experienței de utilizator pentru fiecare dispozitiv.
Interogările media fac posibil răspunsul la un browser cu o afișare personalizată a unei pagini web.
Aceasta este bazată pe proprietățile inerente ale dispozitivului pe care rulează.
Înainte ca pagina web să fie încărcată și afișată de browser, informațiile media sunt preluate.
Acest proces are loc prin intermediul unor interogări media.
Care este marele avantaj al interogărilor media CSS?
Nu trebuie specificate rezoluții și dimensiuni de ecran adecvate pentru fiecare dispozitiv în parte.
Interogările media CSS oferă o modalitate ușoară de aliniere a paginilor web la mai multe dispozitive.
Prin urmare, sunt o parte importantă a optimizării SEO mobile.
Cum funcționează aceste interogări media?
Interogările media CSS constau dintr-un tip de opțiune și una sau mai multe expresii numite funcții media.
Mai multe interogări pot fi combinate de operatori logici.
Interogările media sunt introduse cu „@media” și alocă un bloc CSS unei pagini.
Cu toate acestea, este important să fie îndeplinite următoarele condiții.
Interogările media sunt utilizate pentru a interoga tipul de suport media (smartphone, tabletă sau TV).
Mai apoi, adăugăm și caracteristicile media. Aici putem include orientarea ecranului, rezoluția, lățimea sau culorile.
Interogarea tipurilor de media prin interogări media
CSS pentru un anumit dispozitiv de ieșire poate fi definit pe baza tipurilor de suport.
Cu toate acestea, interogarea tipului media cu interogări media este opțională.
Dacă în interogările media nu este definit niciun tip de media, se aplică automat valoarea implicită „all”.
Cele mai frecvente valori pentru tipurile de media sunt:
- „screen” pentru ecrane de calculator, tablete și smartphone-uri;
- „print” pentru controlul ieșirii de imprimare a unui website;
- „tv” pentru televizoare;
- „speech” pentru ieșirea pe un cititor de ecran care citește conținutul.
Interogarea funcțiilor media prin interogările media
Funcțiile media sunt expresii care definesc una sau mai multe caracteristici de tip media.
Acestea trebuie îndeplinite pentru ca următoarele CSS să fie alocate.
Funcțiile media includ, de exemplu, orientarea, înălțimea, lățimea și rezoluția unui ecran.
O expresie este adevărată când caracteristica este îndeplinită, și falsă dacă nu.
Dacă mai multe caracteristici media sunt definite într-o singură interogare, toate trebuie să fie adevărate.
Doar în acest mod întreaga interogare poate să fie adevărată.
Punctele de întrerupere în interogări media
În aspectul receptiv al unei pagini web, sunt setate pentru afișarea corectă în anumite dimensiuni de portofoliu.
Un punct de pauză este o condiție definită în interogările media.
Modifică aspectul unei pagini web la o anumită dimensiune de afișare.
Vă recomandăm să începeți cu design-ul pentru cel mai mic dispozitiv de ieșire (telefoane inteligente).
Mai ales când aranjați o pagină web receptivă. Apoi, adaptați pentru tablete, laptop-uri și monitoare mari cu puncte de întrerupere și CSS.
Un punct de întrerupere și CSS corespunzător trebuie definite ori de câte ori afișajul nu mai este consecvent.
CSS din această interogare media suprascrie doar stilurile care sunt schimbate de punctul de întrerupere.
Punctele de întrerupere din interogările media CSS sunt definite specificând o valoare de pixel.
Pentru a asigura afișarea corectă a fiecărui dispozitiv trebuie să fie integrată o etichetă meta de portofoliu.
Aceasta trebuie inserată în zona principală a codului HTML.
Acest meta tag le spune browserelor cum să gestioneze dimensiunile și scalarea paginii.
Cu „width=device-width” browserele sunt instruite în mod special. Acestea trebuie să utilizeze lățimea ecranului în pixeli independenți de dispozitiv.
Directiva „initial-scale=1.0” garantează o relație de 1:1 între pixeli CSS și pixeli independenți de dispozitiv.
Articole similare