pentru a implementa designul web receptiv, este important să înțelegeți interogările media în CSS, în special interogările media only și media screen.

să începem cu întrebarea evidentă.

Ce este o interogare media?

o interogare media este o tehnică care a fost introdusă în CSS3. Interogarea implică utilizarea regulii @ media pentru a rula un bloc de proprietăți CSS în cazul în care o condiție predeterminată este adevărată.

de exemplu, codul de mai jos dictează că, dacă fereastra browserului este de 400px sau mai puțin, culoarea de fundal va fi verde deschis:

@media only screen și (max-width: 400px) {
body {
Background-color: lightgreen;
}
}

interogările Media sunt utile în special pentru adăugarea punctelor de întrerupere pentru designul receptiv. Deoarece punctele de întrerupere sunt în esență numere de pixeli la care conținutul sau designul apare diferit față de utilizatori, interogările media sunt utilizate pentru a defini ce modificări trebuie să apară la ce pixeli.

în exemplul de mai jos, codul direcționează că, dacă fereastra browserului este redusă sub 600px, fiecare lățime a coloanei ar trebui să devină 100%:

/* pentru desktop: */
.col-1 {lățime: 8,33%;}
.col – 2 {lățime: 16,66%;}
.col-3 {lățime: 25%;}
.col – 4 {lățime: 33,33%;}
.col – 5 {lățime: 41,66%;}
.col-6 {Lățime: 50%;}
.col – 7 {lățime: 58,33%;}
.col – 8 {lățime: 66,66%;}
.col-9 {Lățime: 75%;}
.col-10 {lățime: 83,33%;}
.col-11 {lățime: 91,66%;}
.col-12 {Lățime: 100%;}

@media numai ecran și (max-lățime: 600px) {
/* pentru telefoane mobile: * /
{
Lățime: 100%;
}
}

fiecare interogare media constă dintr-un tip media opțional și una sau mai multe expresii ale caracteristicilor media. Este posibil să combinați mai multe interogări media cu operatorii logici. Toate interogările media sunt sensibile la majuscule și minuscule.

fiecare interogare media este considerată adevărată atunci când tipul media specificat se potrivește cu dispozitivele pe care este afișat site-ul web. În plus, expresiile caracteristicilor media trebuie să fie, de asemenea, adevărate.

Ce este interogarea media-ecran?

interogarea ecranului @media înseamnă pur și simplu că interogarea în cauză este destinată ecranelor color sau dispozitivelor care acceptă un mod „ecran”.

să luăm un exemplu:

@media screen și (max-width:500px)

interogarea de mai sus se aplică ecranelor cu o lățime maximă de 500 pixeli. Ideea acestui lucru este în principal de a direcționa codul pentru a distinge între ‘ecran’ și alte tipuri de suporturi (cum ar fi imprimare, braille, embosat, handheld etc.).

care este interogarea numai media?prin adăugarea operatorului logic ‘numai’ la interogarea media, dezvoltatorul se asigură că interogarea este aplicată numai dacă întreaga condiție se potrivește. Dacă nu utilizați numai, este posibil ca browserele mai vechi să nu citească sau să interpreteze toate expresiile caracteristicilor media. De exemplu, dacă interogarea este

@media screen și (max-width:500px)

browserele mai vechi pot interpreta interogarea ca doar ecran și ignora numărul de pixeli. Acest lucru ar duce la aplicarea condiției de interogare pe toate ecranele. Pentru a preveni acest lucru, puteți utiliza:

@media numai ecran și (max-lățime:500px)

când utilizați singurul operator, asigurați-vă că specificați tipul de suport.

semnificația în designul receptiv

interogările Media sunt esențiale în implementarea designului web receptiv. Întrebările discutate mai sus sunt două dintre cele mai frecvent utilizate și sunt utile pentru a vă asigura că conținutul site-ului dvs. web este optimizat pentru dimensiunile și tipurile de dispozitive.

după ce ați utilizat interogări CSS pe site-ul dvs. web, asigurați-vă că verificați eficacitatea acestora. Cel mai simplu mod de a face acest lucru este să utilizați un instrument care vă permite să testați designul site-ului dvs. web pe dispozitive și browsere reale. Există mai multe instrumente pentru a facilita acest lucru, dar luați — vă timp pentru a găsi un verificator receptiv online, care vă oferă posibilitatea de a testa pe o varietate suficient de largă de dispozitive-atât desktop, cât și mobil.