9 trucuri CSS avansate de interogare media pe care ar trebui să le cunoașteți

O experiență utilizabilă și accesibilă este vitală pentru un site web de succes. Dacă cititorii dvs. au o experiență pozitivă, este mai probabil să efectueze un apel la acțiune, inclusiv să cumpere produse. De asemenea, este mai probabil să revină sau să recomande site-ul dvs. altora. Experiența este cheia.

Interogările media oferă diferite funcții CSS care vă pot personaliza site-ul. Vă permit să personalizați experiența fiecărui utilizator în funcție de capacitățile dispozitivului său. Aflați cum să oferiți cititorilor dvs. cea mai bună experiență, indiferent dacă își folosesc telefonul sau un monitor mare.

1. Caracteristica indicatorului

The @regula media are o funcție de indicator care vă permite să vă personalizați designul pe baza dispozitivului de indicare principal. Puteți testa disponibilitatea și calitatea.

Acest indicator caracteristica de interogare media ia una dintre cele trei valori: nici unul, grosier sau fin. The nici unul valoarea se aplică atunci când nu există niciun dispozitiv de indicare. The

aspru valoarea se aplică atunci când dispozitivul de indicare primar are un nivel de precizie redus. Si amenda valoarea se aplică atunci când dispozitivul de indicare primar are un nivel ridicat de precizie.

Folosind indicatorul Caracteristică

Opțiuni pentru a alege: 
 Opțiunea Unu
 Opțiunea a doua

Codul de mai sus generează două opțiuni radio de intrare, care vor varia în funcție de precizia dispozitivului de indicare principal al computerului.

Un computer care are un dispozitiv de indicare principal precis (sau de înaltă calitate) va afișa următoarea pagină web:

Un computer care are un dispozitiv principal cu precizie limitată (sau calitate scăzută) va afișa următoarea pagină web:

Dispozitivul care are un dispozitiv de indicare principal cu un nivel limitat de precizie are butoane radio mai mari. Acest lucru oferă o experiență de utilizator mai bună pentru acești utilizatori. Cu funcția pointer, vă puteți asigura că toți utilizatorii dvs. au o experiență plăcută, indiferent de dispozitivul lor.

2. Caracteristica cu orice pointer

Ca și caracteristica pointer, caracteristica de interogare media cu orice pointer vizează dispozitivele de indicare. Cu toate acestea, caracteristica orice pointer evaluează fiecare dispozitiv de indicare al unui computer. Caracteristica orice pointer folosește, de asemenea nici unul, aspru, și amenda valorile.

Folosind caracteristica orice pointer

 @media (orice indicator: bine) {
 intrare[tip="radio"] {
 latime: 15px;
 înălțime: 15px;
 chenar-rază: 20px;
 lățime chenar: 1px;
 }
 }
@media (orice indicator: grosier) {
 intrare[tip="radio"] {
 latime: 25px;
 inaltime: 25px;
 chenar-rază: 20px;
 lățime chenar: 2px;
 }
 }

Puteți înlocui pur și simplu codul de mai sus cu secțiunea de interogare media a codului din exemplul de caracteristică indicator. Codul de mai sus redă un afișaj adecvat bazat pe calitatea oricărui dispozitiv de indicare pe care l-ar putea avea un computer.

3. Funcția de hover

Funcția de interogare media de trecere cu mouse-ul evaluează dacă mecanismul de intrare primar al unui dispozitiv este capabil să treacă peste elementele dintr-o interfață de utilizare.

Folosind funcția de trecere cu mouse-ul

 /* CSS */
 A{
 text-decor: niciuna;
 culoarea neagra;
 }
 @media (hover: hover) {
 a: hover {
 Culoarea albastra;
 }
 }
 HTML 
 Un element de legătură

Codul de mai sus va afișa un element. Se va schimba culoarea (de la negru la albastru) ori de câte ori mecanismul de intrare primar al unui dispozitiv (care acceptă hovering) trece peste el.

4. Funcția de trecere cu mouse-ul

The orice-hover interogarea media vizează orice mecanism de intrare, inclusiv mecanismul de intrare primar.

Utilizarea funcției de trecere cu mouse-ul

@media (orice-hover: hover) {
 a: hover {
 Culoarea albastra;
 }
 }

Interogarea media de mai sus produce un efect de hover pentru orice mecanism de introducere care este capabil să treacă peste un element.

5. Caracteristica de rezoluție

Funcția de interogare media rezoluție calculează numărul de pixeli afișați de un anumit dispozitiv. Un dispozitiv care afișează mai mulți pixeli pe inch are o rezoluție mai bună, deoarece afișează imagini cu mai multe detalii. Această funcție poate ajuta un dezvoltator să decidă ce utilizatori de dispozitiv ar putea vedea elementele într-o interfață de utilizare mai clar.

Caracteristica de rezoluție folosește intervalul. Aceasta înseamnă că, precum și utilizarea rezoluţie cuvânt cheie, puteți utiliza rezoluție minimă și rezolutie maxima. Caracteristica de rezoluție a interogării media aparține tipului de date de rezoluție. Aceasta înseamnă că funcția de rezoluție poate fi măsurată în una dintre cele trei unități: puncte pe inch (dpi), puncte pe centimetru (dpcm) sau puncte pe pixeli (dppx).

Utilizarea funcției de rezoluție

/* CSS */
@media (rezoluție minimă: 72 dpi) {
 p {
 culoare albă;
 culoare de fundal: albastru;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Cea mai scăzută rezoluție pe care o poate avea un dispozitiv și încă afișa imagini de calitate este de 72 dpi. Deci, dacă un dispozitiv are o rezoluție de 72 dpi sau mai mult, va afișa următoarea ieșire în browser:

6. Caracteristica de orientare

O fereastră de vizualizare a dispozitivului poate avea doar una dintre cele două orientări: portret sau peisaj. Trebuie să rețineți că orientarea unei ferestre de vizualizare este diferită de cea a dispozitivului. Dacă un dispozitiv folosește o tastatură soft, fereastra sa se poate schimba de la portret la peisaj în timp ce dispozitivul însuși este încă în poziție portret.

Utilizarea caracteristicii de orientare

/* CSS */
 corp{
 display: flex;
 }
 secțiune{
 chenar: 2px albastru solid;
 umplutură: 3px;
 margine: 3px;
 }
 @media (orientare: peisaj) {
 corp {
 flex-direcție: rând;
 }
 }
@media (orientare: portret) {
 corp {
 flex-direcție: coloană;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Codul de mai sus modifică aspectul unei pagini web pe baza orientării dispozitivului.

Un dispozitiv cu o fereastră de vizualizare în modul peisaj va afișa următoarea pagină web:

Un dispozitiv cu o fereastră de vizualizare în modul portret va afișa următoarea pagină web:

7. Caracteristica înălțimii

Funcția de interogare media înălțime vă permite să specificați stilul CSS pe baza înălțimii ferestrei de vizualizare a dispozitivului unui utilizator. Această caracteristică acceptă gamă, așa că puteți utiliza și înălțime minimă și inaltime maxima Cuvinte cheie.

Utilizarea funcției de înălțime

 /* CSS */
 @media (înălțime minimă: 360 px) {
 p{
 chenar: 2px punctat portocaliu roșu;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Codul de mai sus personalizează ceea ce vede un utilizator în funcție de înălțimea dispozitivului său. Utilizatorii cu o înălțime a dispozitivului de 360 ​​px și mai mult vor vedea ceva similar cu următoarea pagină web:

Dispozitivele cu o înălțime sub 360 px nu vor afișa chenarul din jurul paragrafului de pe pagina web.

8. Caracteristica lățimii

Funcția de interogare pe lățime media vă permite să creați un stil CSS specific pe baza lățimii ferestrei de vizualizare a dispozitivului unui utilizator. Această caracteristică acceptă și raza de acțiune, așa că aveți opțiunea de a utiliza lățime minimă și lățimea maximă Cuvinte cheie.

Utilizarea caracteristicii lățimii

 /* CSS */
 @media (lățime minimă: 600 px) {
 p{
 chenar: 2px solid violet;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Codul de mai sus personalizează ceea ce vede un utilizator în funcție de lățimea dispozitivului său. Utilizatorii cu o lățime a dispozitivului de 600 px și mai mult vor vedea ceva de genul următoarei pagini web:

Utilizarea interogărilor media bazate pe lățime și înălțime poate fi o strategie eficientă în făcând site-ul dvs. receptiv.

9. Caracteristica de culoare

Caracteristica de interogare media color evaluează componenta de culoare a unui dispozitiv (roșu, verde, albastru). Valoarea se referă la câți biți folosește un afișaj pentru fiecare componentă, care definește câte culori diferite poate afișa. Dispozitivele moderne folosesc de obicei un afișaj pe 24 de biți care utilizează opt biți per componentă de culoare. De asemenea, ia o valoare întreagă, unde un dispozitiv incolor este zero.

Caracteristica de culoare folosește și min-culoare și max-culoare intervale.

Utilizarea caracteristicii de culoare

 /* CSS */
 @media (culoare minimă: 7) {
 p{
 chenar: 2px verde continuu;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Dispozitivele cu o componentă de culoare de șapte și mai mult vor afișa următoarele rezultate în browserele lor:

Acum puteți crea experiențe unice pentru utilizator

Ar trebui să puteți utiliza aceste interogări media avansate pentru a îmbunătăți experiența fiecărui utilizator care vă vizitează site-ul sau aplicația. Este important să oferiți utilizatorilor de dispozitive mobile și utilizatorilor de desktop o experiență la fel de pozitivă pe site-ul dvs.

Interogările media nu sunt singurele instrumente CSS care vă pot consolida abilitățile de dezvoltator.

8 sfaturi și trucuri esențiale CSS pe care fiecare dezvoltator ar trebui să le cunoască

Citiți în continuare

Despre autor