9 naprednih trikov CSS za medijsko poizvedbo, ki jih morate poznati

Uporabna in dostopna izkušnja je ključnega pomena za uspešno spletno mesto. Če imajo vaši bralci pozitivno izkušnjo, je večja verjetnost, da bodo izvedli poziv k dejanju, vključno z nakupom izdelkov. Prav tako je večja verjetnost, da bodo vaše spletno mesto vrnili ali priporočili drugim. Izkušnje so ključne.

Medijske poizvedbe ponujajo različne funkcije CSS, ki lahko prilagodijo vaše spletno mesto. Omogočajo vam, da prilagodite izkušnjo vsakega uporabnika glede na zmogljivosti njihove naprave. Naučite se, kako svojim bralcem omogočiti najboljšo izkušnjo, ne glede na to, ali uporabljajo telefon ali velik namizni monitor.

1. Funkcija kazalca

The @medijsko pravilo ima funkcijo kazalca, ki vam omogoča, da prilagodite svoj dizajn glede na primarno kazalno napravo. Lahko preizkusite razpoložljivost in kakovost.

Ta kazalec funkcija medijskih poizvedb sprejme eno od treh vrednosti: brez, grobo ali fino. The nobenega vrednost velja, če ni kazalne naprave. The grobo vrednost velja, ko ima primarna kazalna naprava zmanjšano raven natančnosti. In

V redu vrednost velja, če ima primarna kazalna naprava visoko stopnjo natančnosti.

Uporaba funkcije kazalca

Možnosti za izbiro: 
 Možnost ena
 Druga možnost

Zgornja koda generira dve vhodni radijski možnosti, ki se razlikujeta glede na natančnost primarne kazalne naprave računalnika.

Računalnik, ki ima natančno (ali visokokakovostno) primarno kazalno napravo, bo prikazal naslednjo spletno stran:

Računalnik, ki ima primarno napravo z omejeno natančnostjo (ali nizko kakovostjo), bo prikazal naslednjo spletno stran:

Naprava, ki ima primarno kazalno napravo z omejeno stopnjo natančnosti, ima večje izbirne gumbe. To omogoča boljšo uporabniško izkušnjo za takšne uporabnike. S funkcijo kazalca lahko zagotovite, da imajo vsi vaši uporabniki prijetno izkušnjo, ne glede na njihovo napravo.

2. Funkcija poljubnega kazalca

Tako kot funkcija kazalca je tudi funkcija medijske poizvedbe s katerim koli kazalcem cilja na kazalne naprave. Vendar pa funkcija poljubnega kazalca oceni vsako kazalno napravo računalnika. Funkcija poljubnega kazalca uporablja tudi nobenega, grobo, in V redu vrednote.

Uporaba funkcije poljubnega kazalca

 @media (kakršen koli kazalec: v redu) {
 vnos[type="radio"] {
 širina: 15px;
 višina: 15px;
 radij obrobe: 20 slikovnih pik;
 širina obrobe: 1px;
 }
 }
@media (kakršen koli kazalec: grobo) {
 vnos[type="radio"] {
 širina: 25px;
 višina: 25px;
 radij obrobe: 20 slikovnih pik;
 širina obrobe: 2px;
 }
 }

Zgornjo kodo lahko preprosto zamenjate z delom kode za medijsko poizvedbo v primeru funkcije kazalca. Zgornja koda prikazuje ustrezen zaslon glede na kakovost katere koli kazalne naprave, ki jo ima računalnik.

3. Funkcija lebdenja

Funkcija poizvedbe o medijih z lebdečem oceni, ali je primarni vnosni mehanizem naprave sposoben premikati nad elementi v uporabniškem vmesniku.

Uporaba funkcije lebdenja

 /* CSS */
 a{
 besedilna dekoracija: brez;
 barva: črna;
 }
 @media (hover: hover) {
 a: lebdi {
 barva: modra;
 }
 }
 HTML 
 Element povezave

Zgornja koda bo prikazala element. Spremenil bo barvo (iz črne v modro), ko bo primarni vnosni mehanizem naprave (ki podpira lebdenje) lebdel nad njo.

4. Funkcija poljubnega lebdenja

The poljubno lebdi medijska poizvedba cilja na kateri koli vnosni mehanizem, vključno s primarnim vnosnim mehanizmom.

Uporaba funkcije poljubnega lebdenja

@media (kakršen koli hover: hover) {
 a: lebdi {
 barva: modra;
 }
 }

Zgornja medijska poizvedba ustvari učinek lebdenja za kateri koli vnosni mehanizem, ki je sposoben lebdeti nad elementom.

5. Funkcija ločljivosti

Funkcija poizvedbe o medijih z ločljivostjo izračuna število slikovnih pik, ki jih prikaže določena naprava. Naprava, ki prikazuje več slikovnih pik na palec, ima boljšo ločljivost, ker prikazuje slike z več podrobnostmi. Ta funkcija lahko pomaga razvijalcu, da se odloči, katere naprave bodo uporabniki bolj jasno videli elemente uporabniškega vmesnika.

Funkcija ločljivosti uporablja razpon. To pomeni, da poleg uporabe resolucija ključno besedo, ki jo lahko uporabite min-ločljivost in največja ločljivost. Funkcija ločljivosti medijske poizvedbe spada v tip podatkov ločljivosti. To pomeni, da je ločljivost merljiva v eni od treh enot: pike na palec (dpi), pike na centimeter (dpcm) ali pike na slikovne pike (dppx).

Uporaba funkcije ločljivosti

/* CSS */
@media (najmanjša ločljivost: 72 dpi) {
 p {
 barva: bela;
 barva ozadja: modra;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Najnižja ločljivost, ki jo lahko ima naprava in še vedno prikazuje kakovostne slike, je 72 dpi. Torej, če ima naprava ločljivost 72 dpi ali več, bo v svojem brskalniku prikazala naslednji rezultat:

6. Funkcija orientacije

Pogledno polje naprave ima lahko samo eno od dveh usmeritev: portret oz pokrajina. Upoštevajte, da se usmerjenost vidnega polja razlikuje od usmerjenosti naprave. Če naprava uporablja mehko tipkovnico, se lahko njeno vidno polje spremeni iz pokončnega v ležeče, medtem ko je naprava še vedno v pokončnem položaju.

Uporaba funkcije orientacije

/* CSS */
 telo{
 zaslon: flex;
 }
 oddelek{
 obroba: 2px polno modra;
 padding: 3px;
 rob: 3px;
 }
 @media (orientacija: ležeča) {
 telo {
 flex-direction: vrstica;
 }
 }
@media (orientacija: pokončno) {
 telo {
 flex-direction: stolpec;
 }
 }
 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.

Zgornja koda spremeni postavitev baze spletne strani glede na orientacijo naprave.

Naprava z vidnim poljem v ležečem načinu bo prikazala naslednjo spletno stran:

Naprava z vidnim poljem v pokončnem načinu bo prikazala naslednjo spletno stran:

7. Značilnost višine

Funkcija poizvedbe o višini medija vam omogoča, da določite slog CSS na podlagi višine vidnega polja uporabnikove naprave. Ta funkcija podpira obseg, tako da lahko uporabite tudi min-višina in največja višina ključne besede.

Uporaba funkcije višine

 /* CSS */
 @media (najmanjša višina: 360 slikovnih pik) {
 p{
 obroba: 2px pikčasto oranžna;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Zgornja koda prilagodi, kaj vidi uporabnik, glede na višino svoje naprave. Uporabniki z višino naprave 360 ​​slikovnih pik in več bodo videli nekaj podobnega naslednji spletni strani:

Naprave z višino pod 360 slikovnimi pikami ne bodo prikazale obrobe okoli odstavka na spletni strani.

8. Funkcija širine

Funkcija poizvedbe o širini medija vam omogoča, da ustvarite poseben slog CSS na podlagi širine vidnega polja uporabnikove naprave. Ta funkcija podpira tudi obseg, tako da imate možnost uporabe minimalna širina in največja širina ključne besede.

Uporaba funkcije širine

 /* CSS */
 @media (najmanjša širina: 600 slikovnih pik) {
 p{
 obroba: 2px vijolična;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Zgornja koda prilagaja, kaj vidi uporabnik, glede na širino svoje naprave. Uporabniki s širino naprave 600 slikovnih pik in več bodo videli nekaj podobnega tej spletni strani:

Uporaba medijskih poizvedb, ki temeljijo na širini in višini, je lahko učinkovita strategija da bo vaše spletno mesto odzivno.

9. Barvna značilnost

Funkcija poizvedbe o barvnih medijih oceni barvno komponento naprave (rdeča, zelena, modra). Vrednost se nanaša na to, koliko bitov zaslon uporablja za vsako komponento, kar določa, koliko različnih barv lahko prikaže. Sodobne naprave običajno uporabljajo 24-bitni zaslon, ki uporablja osem bitov na barvno komponento. Zavzame tudi celo število, kjer je brezbarvna naprava nič.

Barvna funkcija uporablja tudi min-barva in max-barva obsegi.

Uporaba barvne funkcije

 /* CSS */
 @media (najmanjša barva: 7) {
 p{
 obroba: 2px zelena;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Naprave z barvno komponento sedem ali več bodo v svojih brskalnikih prikazale naslednje rezultate:

Zdaj lahko ustvarite edinstveno uporabniško izkušnjo

Te napredne medijske poizvedbe bi morali imeti možnost uporabiti za izboljšanje izkušnje vsakega uporabnika, ki obišče vaše spletno mesto ali aplikacijo. Pomembno je, da uporabnikom mobilnih naprav in uporabnikom namiznih računalnikov omogočite enako pozitivno izkušnjo na vašem spletnem mestu.

Medijske poizvedbe niso edina orodja CSS, ki lahko okrepijo vaše razvijalske sposobnosti.

8 bistvenih CSS nasvetov in trikov, ki bi jih moral poznati vsak razvijalec

Preberite Naprej

O avtorju