9 täiustatud meediumipäringu CSS-i nippi, mida peaksite teadma

Kasutatav ja juurdepääsetav kogemus on eduka veebisaidi jaoks ülioluline. Kui teie lugejatel on positiivne kogemus, kutsuvad nad üles tõenäolisemalt tegutsema, sealhulgas ostma tooteid. Samuti naasevad nad tõenäolisemalt teie saiti teistele või soovitavad seda teistele. Kogemused on võtmetähtsusega.

Meediapäringud pakuvad erinevaid CSS-i funktsioone, mis võivad teie veebisaiti kohandada. Need võimaldavad teil kohandada iga kasutaja kasutuskogemust vastavalt nende seadme võimalustele. Siit saate teada, kuidas pakkuda oma lugejatele parimat kasutuskogemust, olenemata sellest, kas nad kasutavad telefoni või suurt lauaarvuti monitori.

1. Kursori funktsioon

The @meedia reegel on kursori funktsioon, mis võimaldab teil kohandada oma kujundust esmase osutusseadme alusel. Saate testida saadavust ja kvaliteeti.

See osuti meediumipäringu funktsioon võtab ühe kolmest väärtusest: none, coarse või fine. The mitte ühtegi väärtus kehtib siis, kui osutusseadet pole. The jäme väärtus kehtib, kui esmase osutusseadme täpsusaste on vähenenud. Ja

hästi väärtus kehtib, kui esmasel osutusseadmel on kõrge täpsus.

Kursori funktsiooni kasutamine

Valikuvõimalused: 
 Esimene võimalus
 Variant 2

Ülaltoodud kood genereerib kaks sisendraadio valikut, mis sõltuvad arvuti peamise osutusseadme täpsusest.

Arvuti, millel on täpne (või kvaliteetne) esmane osutusseade, kuvab järgmise veebilehe:

Arvuti, millel on piiratud täpsusega (või madala kvaliteediga) põhiseade, kuvab järgmise veebilehe:

Seadmel, millel on piiratud täpsusega esmane osutusseade, on suuremad raadionupud. See annab sellistele kasutajatele parema kasutuskogemuse. Kursori funktsiooni abil saate tagada, et kõik kasutajad saavad meeldiva kogemuse, olenemata nende seadmest.

2. Mis tahes kursori funktsioon

Sarnaselt kursorifunktsiooniga sihib suvalise kursoriga meediumipäringu funktsioon osutusseadmeid. Mis tahes osuti funktsioon hindab aga iga arvuti osutusseadet. Mis tahes kursori funktsioon kasutab ka mitte ühtegi, jäme, ja hästi väärtused.

Mis tahes kursori funktsiooni kasutamine

 @meedia (ükskõik milline osuti: hea) {
 sisend[tüüp="raadio"] {
 laius: 15 pikslit;
 kõrgus: 15px;
 piiri raadius: 20 pikslit;
 äärise laius: 1px;
 }
 }
@meedia (ükskõik milline osuti: jäme) {
 sisend[tüüp="raadio"] {
 laius: 25 pikslit;
 kõrgus: 25px;
 piiri raadius: 20 pikslit;
 äärise laius: 2 pikslit;
 }
 }

Ülaltoodud koodi saate lihtsalt asendada kursori funktsiooni näites oleva koodi meediumipäringu jaotisega. Ülaltoodud kood loob sobiva kuva, mis põhineb mis tahes osutusseadme kvaliteedil, mis arvutis võib olla.

3. Hõljutusfunktsioon

Hõljuva meediumipäringu funktsioon hindab, kas seadme esmane sisendmehhanism on võimeline hõljutama kasutajaliidese elementide kohal.

Hõljutusfunktsiooni kasutamine

 /* CSS */
 a{
 tekst-kaunistus: puudub;
 värv: must;
 }
 @media (hover: hõljuta) {
 a: hõljutage {
 värv: sinine;
 }
 }
 HTML 
 Lingi element

Ülaltoodud kood kuvab an element. See muudab värvi (mustast siniseks), kui seadme (mis toetab hõljumist) esmane sisendmehhanism selle kohal hõljub.

4. Suvalise hõljumise funktsioon

The suvaline hõljumine meediumipäring sihib mis tahes sisendmehhanismi, sealhulgas esmast sisendmehhanismi.

Mis tahes kursoriga funktsiooni kasutamine

@meedia (kõik-hover: hõljumine) {
 a: hõljutage {
 värv: sinine;
 }
 }

Ülaltoodud meediumipäring loob hõljutusefekti igale sisendmehhanismile, mis suudab hõljutada elemendi kohal.

5. Eraldusvõime funktsioon

Eraldusvõimega meediumipäringu funktsioon arvutab konkreetse seadme kuvatavate pikslite arvu. Seadmel, mis kuvab rohkem piksleid tolli kohta, on parem eraldusvõime, kuna see kuvab pilte üksikasjalikumana. See funktsioon võib aidata arendajal otsustada, millise seadme kasutajad näevad kasutajaliidese elemente selgemalt.

Eraldusvõime funktsioon kasutab vahemikku. See tähendab, et lisaks sellele, et resolutsioon märksõna, saate kasutada min-eraldusvõime ja maksimaalne eraldusvõime. Meediumipäringu eraldusvõime funktsioon kuulub eraldusvõime andmetüübi alla. See tähendab, et eraldusvõime on mõõdetav ühes kolmest ühikust: punktid tolli kohta (dpi), punktid sentimeetri kohta (dpcm) või punktid piksli kohta (dppx).

Eraldusvõime funktsiooni kasutamine

/* CSS */
@meedia (minimaalne eraldusvõime: 72 dpi) {
 p {
 värvus: valge;
 taustavärv: sinine;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing eliit.

Madalaim eraldusvõime, mis seadmel võib olla ja endiselt kvaliteetseid pilte kuvada, on 72 dpi. Seega, kui seadme eraldusvõime on 72 dpi või rohkem, kuvab see brauseris järgmise väljundi:

6. Suunamisfunktsioon

Seadme vaateaknal saab olla ainult üks kahest orientatsioonist. portree või maastik. Pange tähele, et vaateava orientatsioon erineb seadme orientatsioonist. Kui seade kasutab pehmet klaviatuuri, võib selle vaateava muutuda vertikaalselt horisontaalseks, kui seade ise on ikka vertikaalasendis.

Suunamisfunktsiooni kasutamine

/* CSS */
 keha{
 ekraan: flex;
 }
 jaotis{
 ääris: 2px ühevärviline sinine;
 polsterdus: 3px;
 veeris: 3px;
 }
 @meedia (orientatsioon: maastik) {
 keha {
 painduv suund: rida;
 }
 }
@meedia (orientatsioon: portree) {
 keha {
 paindesuund: veerg;
 }
 }
 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.

Ülaltoodud kood muudab veebilehe aluse paigutust seadme orientatsiooni järgi.

Rõhtpaigutusrežiimis vaateavaga seade kuvab järgmise veebilehe:

Portreerežiimis vaateavaga seade kuvab järgmise veebilehe:

7. Kõrguse funktsioon

Kõrguse meediapäringu funktsioon võimaldab teil määrata CSS-stiili, mis põhineb kasutaja seadme vaateakna kõrgusel. See funktsioon toetab vahemikku, nii et saate kasutada ka min-kõrgus ja max kõrgus märksõnad.

Kõrguse funktsiooni kasutamine

 /* CSS */
 @meedia (min-kõrgus: 360 pikslit) {
 p{
 ääris: 2px punktiir oranž;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Ülaltoodud kood kohandab seda, mida kasutaja seadme kõrguse põhjal näeb. Kasutajad, kelle seadme kõrgus on 360 pikslit ja rohkem, näevad midagi sarnast järgmisele veebilehele:

Seadmed, mille kõrgus on alla 360 piksli, ei kuva veebilehel lõigu ümber äärist.

8. Laiuse funktsioon

Laiuse meediapäringu funktsioon võimaldab teil luua konkreetse CSS-stiili, mis põhineb kasutaja seadme vaateava laiusel. See funktsioon toetab ka vahemikku, nii et teil on võimalus kasutada min-laius ja maksimaalne laius märksõnad.

Laiuse funktsiooni kasutamine

 /* CSS */
 @meedia (min-laius: 600 pikslit) {
 p{
 ääris: 2px ühevärviline lilla;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Ülaltoodud kood kohandab seda, mida kasutaja oma seadme laiuse põhjal näeb. Kasutajad, kelle seadme laius on 600 pikslit või rohkem, näevad järgmist veebilehte:

Laius- ja kõrguspõhiste meediumipäringute kasutamine võib olla tõhus strateegia muuta oma veebisait tundlikuks.

9. Värvi funktsioon

Värvilise meedia päringu funktsioon hindab seadme värvikomponenti (punane, roheline, sinine). Väärtus viitab sellele, mitu bitti kuvar iga komponendi jaoks kasutab, mis määrab, kui palju erinevaid värve see kuvada saab. Kaasaegsed seadmed kasutavad tavaliselt 24-bitist ekraani, mis kasutab kaheksa bitti värvikomponendi kohta. See võtab ka täisarvu, kus värvitu seade on null.

Värvifunktsioon kasutab ka min-värv ja max-värv vahemikud.

Värvifunktsiooni kasutamine

 /* CSS */
 @meedia (min-värv: 7) {
 p{
 ääris: 2px ühevärviline roheline;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Seadmed, mille värvikomponent on seitse ja rohkem, kuvavad oma brauseris järgmise väljundi:

Nüüd saate luua ainulaadseid kasutajakogemusi

Peaksite saama kasutada neid täpsemaid meediumipäringuid, et parandada iga teie veebisaiti või rakendust külastava kasutaja kasutuskogemust. Oluline on pakkuda oma saidil nii mobiilikasutajatele kui ka lauaarvutitele võrdselt positiivset kogemust.

Meediumipäringud pole ainsad CSS-i tööriistad, mis võivad teie arendajaoskusi tugevdada.

8 olulist CSS-i nõuannet ja nippi, mida iga arendaja peaks teadma

Loe edasi

Autori kohta