CSS Media Queries: descriere pas-cu-pas, caracteristici și recenzii

După ce, la un moment dat, cei care vizitează site-uri pentru smartphone-uri și dispozitive mobile similare care cauzează altele doar râs. Mulți pur și simplu nu au putut înțelege de ce acest lucru este necesar, deoarece există computere stationare atât de convenabile! Sau, în cel mai rău caz, laptopurile. În plus, Internetul mobil a fost apoi costisitor.

Timpul a trecut. Internetul era ieftin. Pe piață au ieșit mai multe telefoane și tablete. Un timp mai târziu, proprietarii de site-uri populare nedumerit capul rătăcit. Potrivit statisticilor, sa dovedit că resursele lor sunt mai des vizitate de la smartphoneuri decât de la PC-urile staționare!

În acele zile, site-urile nu au fost optimizate pentru vizionarea de pe dispozitivele mobile. Dacă mergeți la vechea resursă de pe telefon, va trebui să vă mulțumiți cu litere mici, elemente de meniu mici și butoane incomode.

Apariția CSS Media Queries

A existat o nevoie de a face resurse astfel încât acestea să arate bine atunci când sunt vizualizate de pe orice ecran. În primul rând, practica de creare a unor site-uri separate pentru fiecare dimensiune sa răspândit. De exemplu, un vizitator care a folosit un telefon mobil a primit o singură resursă, iar cel care "a stat" de pe computer - pe de altă parte. Dar a fost lung, scump și inconfortabil.

Apoi au venit CSS3 Media Queries. Cu ajutorul lor, o oportunitate simplă de a implementa un design dinamic.

Ce este un design dinamic?

Acest termen este folosit dacă aspectul resursei se modifică în funcție de dimensiunea ecranului pe care este vizionată. Cum să înțelegeți acest lucru? E simplu.

Imaginați-vă că aveți un site web. În partea de sus a acestuia există un meniu de navigare. Orizontală. Se întinde întreaga lățime a paginii. Sub el este un bloc cu informații de contact. Telefonul și adresa sunt de asemenea împrăștiate pe două blocuri și sunt dispuse orizontal unul lângă celălalt. Sub acest bloc este conținutul principal, iar bara laterală este situată la stânga sau la dreapta. Mai jos, ca de obicei, un subsol.

Acesta este un layout "clasic" al componentelor. Este minunat pentru un computer personal, dar nu prea convenabil pentru telefoanele mobile. Meniul orizontal este prea lat. Contactele sunt departe una de cealaltă. Pentru a utiliza informațiile din bara laterală și trebuie să derulați ecranul, și asta nu-i place tuturor.

Problema poate fi rezolvată folosind un design adaptabil și mobil cu CSS3 Media Queries. Cu ajutorul interogărilor media, reconstruim locația conținutului illip-ului. Acum totul funcționează astfel:

• deasupra - un bloc cu un meniu vertical de navigare-
• sub el - un bloc cu contacte, care acum sunt plasate și pe verticală -
• Conținutul barei laterale nu este afișat pe partea conținutului etichetei
  , dar OVER.

Acesta este un exemplu simplu de ceea ce se poate face cu Interogare Web Design Media Queries. De fapt, posibilitățile sunt mult mai mari.

Deci, ce este MediaQuestion?

Sub termenul CSS Media Queries înțelegeți modulul CSS3, prin care puteți modifica conținutul paginii în anumite condiții. De exemplu, începe să răspundă la dimensiunea ecranului sau la orientarea dispozitivului (portret / peisaj).

Cum înțelege sistemul că trebuie să schimbați conținutul? Pentru aceasta, se utilizează interogări media. Acestea specifică anumiți parametri. Dacă dispozitivul de la care vizitatorul a venit pe site corespunde acestor parametri, sunt incluse stilurile preînregistrate. Ele pot fi scrise atât în ​​tabelul general al CSS, cât și într-un fișier separat.

CSS Media interacționează cu browserele

Toate browserele moderne acceptă această tehnică, de la Safari până la Chrome. Desigur, utilizatorii versiunilor mai vechi Internet Explorer vor apărea problemele - Dar să recunoaștem sincer - pe cei care încă mai folosesc vechiul IE, nimic poate provoca probleme.

Întrebări pentru medii Sintaxă de planificare adaptivă

Este posibil să fi întâlnit deja interogări media când ați conectat o foaie de stil html. Amintiți-vă această linie? Uneori sa adăugat un alt parametru la final, care arăta astfel: media = rsquo-screenrsquo-.

Aceasta este cererea media! Aceasta înseamnă că fișierul de stil specificat va funcționa pe dispozitivele echipate cu ecran. În loc de ecran puteți specifica imprimare - În acest caz, stilurile din fișier sunt aplicate dacă pagina este tipărită.

Puteți utiliza următoarele atribute:

• toate - opțiune universală, este folosită de tăcere, este folosită în toate cazurile -
• scrteen - ecrane (computere, laptopuri, tablete, smartphone-uri și tot ce este echipat cu un afișaj);
• print - printery-
• proeminență - proiectoare-
• vorbire - browsere de vorbire -
• braille - pentru dispozitivele pentru persoanele cu deficiențe de vedere -
• televizor - pentru ecrane TV.

Acest lucru nu este totul. Există mai multe atribute suplimentare ale CSS Media Queries, dar acestea sunt rareori folosite. În plus, nu puteți specifica deloc un parametru - în mod implicit, acesta va porni toate.

Structura solicitării mass-media

În loc să creați un fișier de stil, puteți utiliza codul css. Se pare ca aceasta:

Ecranul @media și (max-width: 1024px) {(vor exista stiluri aici}

După directivă @media, ceea ce face clar că interogarea mass-media este utilizat, există o indicație a tipului de dispozitiv (ecran - ecran) și parametri suplimentari. În acest exemplu, se utilizează proprietatea CSS Media Queries Lățime maximă. Acest lucru înseamnă că stilurile specificate în coarde curbate vor fi utilizate dacă dimensiunea ecranului utilizatorului nu depășește 1024px. ecran și și nu sunt necesare. Puteți scrie astfel:

@media (max-width: 1024px) {}

În acest caz, proprietățile vor fi utilizate pe orice dispozitiv, nu doar pe cele care sunt echipate cu un ecran.

Specificarea mai multor parametri

Să presupunem că doriți să limitați gama de dispozitive pe care vor fi aplicate stilurile selectate. De exemplu, doriți să afișați proprietăți numai pentru cei care accesează site-ul dvs. de pe un smartphone cu o dimensiune a ecranului de cel puțin 320px, dar nu mai mult de 500px. În acest caz, interogarea are următoarea formă:

@media (min-width: 320px) și (max-width: 500px) {}

Dacă sunteți familiarizat cu programarea, nj știe pentru ce este folosit operatorul și. Pentru cei care nu știu: verifică dacă ambele condiții sunt adevărate. Adică, pentru a activa proprietățile într-o interogare, ecranul trebuie să fie de cel puțin 320 și nu mai mult de 500 de pixeli.

Număr de operatori și nu se limitează la unul. Puteți să le puneți exact cât doriți. De exemplu, încercați să creați anumite dimensiuni pentru ecrane smartphone și complet diferite pentru televizoare.

Un punct important este orientarea dispozitivului utilizatorului. Cineva navighează pe site-uri de pe un smartphone cu orientare portret, cineva - cu un peisaj. Pentru prima, avem nevoie de o condiție suplimentară orientare: portret, pentru al doilea, respectiv, orientare: peisaj. Aceste linii sunt de asemenea indicate în paranteze după comandă @media. Puteți să le separați folosind și.

O altă nuanță interesantă. În loc de și puteți utiliza operatorul sau. El vrea ca o condiție din cerere să fie adevărată! De exemplu:

@media (max-lățime: 500px) sau (orientare: portret) {}

Dacă ecranul este mai mic de 500px Ori orientare portret este utilizat, stilurile din paranteze curbate vor începe să funcționeze.

Cuvântul nu este pentru o reglare mai fină

Puteți introduce un cuvânt în interogarea media nu. Acest lucru se face astfel:

@media (nu maximă-lățime: 700px) {}

Proprietățile sunt activate dacă lățimea maximă nu este de 700 de pixeli.

Funcții media

În interogări, pot fi utilizate mai multe funcții predefinite. Le puteți vedea pe toate site-urile W3C. Este suficient pentru majoritatea tipografilor să stăpânească trei principale:

• orientare (am vorbit deja despre asta) -
• lățime (lățime, a fost de asemenea menționat) -
• înălțime (Înălțime).

Înălțimea este rar utilizată, dar există mai multe cazuri în care această setare poate fi utilă.

Cum și unde să adresăm cererile?

Multe planuri, dintr-un anumit motiv, le-au pus la capătul foii de stil. De exemplu, mai întâi sunt enumerate stilurile principale, iar apoi, în partea de jos a documentului, există interogări.

Acest lucru nu este foarte bun. Este mult mai convenabil să plasați proprietăți pentru diferite dispozitive imediat după stilurile principale. De exemplu, aveți o div care are o culoare de culoare roșie:

div {

culoare: roșu-

}

Imediat după ce specificați interogarea:

@media (min-width: 320px) {}

Prescriiți proprietățile.

Această abordare va fi greoaie dacă folosiți css "curat". Preprocesorii vin la salvare. Au o mulțime de oportunități interesante pentru o aplicare mai precisă a cererilor.

O altă opțiune este de a plasa proprietăți pentru diferite dispozitive în diferite fișiere de stil. Acest lucru este util în special dacă folosiți directiva de import pentru preprocesoare. Rezultatul este un cod curat și curat.

Ce opțiune să utilizați? Totul depinde de preferințele și particularitățile personale ale muncii echipei. Poate că, în locul muncii dvs., va fi adoptată o anumită metodă de introducere a interogărilor media.

De asemenea, nu uitați că vă puteți simplifica viața cu ajutorul celor mai recente aplicații software. Nu e vorba doar de preprocesoare. Cu ajutorul Gulp Group CSS Media Queries puteți face procesul mult mai convenabil. Vă recomandăm să stăpânești acest instrument sau unele dintre analogii lui.