9 išplėstinės medijos užklausos CSS gudrybės, kurias turėtumėte žinoti

Naudojama, prieinama patirtis yra labai svarbi sėkmingai svetainei. Jei jūsų skaitytojai turi teigiamą patirtį, labiau tikėtina, kad jie ragins veikti, įskaitant produktų pirkimą. Taip pat labiau tikėtina, kad jie grįš arba rekomenduos jūsų svetainę kitiems. Patirtis yra svarbiausia.

Medijos užklausos siūlo skirtingas CSS funkcijas, kurios gali tinkinti jūsų svetainę. Jie leidžia pritaikyti kiekvieno vartotojo patirtį pagal jo įrenginio galimybes. Sužinokite, kaip suteikti savo skaitytojams geriausią patirtį, nesvarbu, ar jie naudojasi telefonu, ar dideliu darbalaukio monitoriumi.

1. Rodyklės funkcija

The @media taisyklė turi žymeklio funkciją, kuri leidžia tinkinti dizainą pagal pagrindinį žymeklio įrenginį. Galite patikrinti prieinamumą ir kokybę.

Ši rodyklė medijos užklausos funkcija įgauna vieną iš trijų reikšmių: none, grubus arba gerai. The nė vienas reikšmė taikoma, kai nėra žymeklio įrenginio. The grubus reikšmė taikoma, kai pirminio žymeklio įrenginio tikslumas yra sumažėjęs. Ir gerai reikšmė taikoma, kai pirminio žymeklio įrenginio tikslumas yra aukštas.

Naudojant žymeklio funkciją

Parinktys, iš kurių galima rinktis: 
 Pirmasis variantas
 Antras variantas

Aukščiau pateiktas kodas generuoja dvi įvesties radijo parinktis, kurios skirsis priklausomai nuo kompiuterio pagrindinio žymeklio įrenginio tikslumo.

Kompiuteris, kuriame yra tikslus (arba aukštos kokybės) pagrindinis žymeklio įrenginys, parodys šį tinklalapį:

Kompiuteris, kuriame yra riboto tikslumo (arba žemos kokybės) pagrindinis įrenginys, parodys šį tinklalapį:

Įrenginys, turintis riboto tikslumo pagrindinį žymeklio įrenginį, turi didesnius radijo mygtukus. Tai suteikia geresnę tokių vartotojų patirtį. Naudodami žymeklio funkciją galite užtikrinti, kad visi naudotojai turėtų malonią patirtį, nepaisant jų įrenginio.

2. Bet kurio žymeklio funkcija

Kaip ir žymeklio funkcija, bet kurios žymeklio medijos užklausos funkcija taikoma nukreipimo įrenginiams. Tačiau bet kokio žymiklio funkcija įvertina kiekvieną kompiuterio nukreipimo įrenginį. Bet kurio žymeklio funkcija taip pat naudoja nė vienas, grubus, ir gerai vertybes.

Naudojant bet kurio žymeklio funkciją

 @media (bet koks žymeklis: gerai) {
 įvestis[tipas="radijas"] {
 plotis: 15px;
 aukštis: 15px;
 kraštinės spindulys: 20 pikselių;
 kraštinės plotis: 1px;
 }
 }
@media (bet koks žymeklis: grubus) {
 įvestis[tipas="radijas"] {
 plotis: 25px;
 aukštis: 25px;
 kraštinės spindulys: 20 pikselių;
 kraštinės plotis: 2 pikseliai;
 }
 }

Galite tiesiog pakeisti anksčiau pateiktą kodą kodo medijos užklausos skyriumi žymeklio funkcijos pavyzdyje. Aukščiau pateiktas kodas pateikia tinkamą ekraną pagal bet kokio žymeklio įrenginio, kurį gali turėti kompiuteris, kokybę.

3. Užvedimo funkcija

Užvedimo medijos užklausos funkcija įvertina, ar pagrindinis įrenginio įvesties mechanizmas gali užvesti pelės žymeklį virš vartotojo sąsajos elementų.

Naudojant pelės žymeklio funkciją

 /* CSS */
 a{
 tekstas-dekoravimas: nėra;
 spalva: juoda;
 }
 @media (užveskite pelės žymeklį: užveskite pelės žymeklį) {
 a: užveskite pelės žymeklį {
 spalva: mėlyna;
 }
 }
 HTML 
 Nuorodos elementas

Aukščiau pateiktas kodas parodys an elementas. Jo spalva pasikeis (iš juodos į mėlyną), kai virš jo užves žymeklis pagrindiniam įrenginio (palaikančio užvedimą) įvesties mechanizmui.

4. Bet kurio pelės žymeklio užvedimo funkcija

The bet koks užvedimas medijos užklausa taikoma bet kuriam įvesties mechanizmui, įskaitant pirminį įvesties mechanizmą.

Naudojant bet kurio pelės žymeklio užvedimo funkciją

@media (bet koks pelės žymeklis: užvedimas) {
 a: užveskite pelės žymeklį {
 spalva: mėlyna;
 }
 }

Aukščiau pateikta medijos užklausa sukuria bet kurio įvesties mechanizmo, galinčio užvesti pelės žymeklį virš elemento, užvedimo efektą.

5. Rezoliucijos funkcija

Raiškos medijos užklausos funkcija apskaičiuoja konkretaus įrenginio rodomų pikselių skaičių. Įrenginys, rodantis daugiau pikselių colyje, turi geresnę skiriamąją gebą, nes jame rodomi išsamesni vaizdai. Ši funkcija gali padėti kūrėjui nuspręsti, kurio įrenginio naudotojai gali aiškiau matyti vartotojo sąsajos elementus.

Rezoliucijos funkcija naudoja diapazoną. Tai reiškia, kad ne tik naudojant rezoliucija raktinį žodį, galite naudoti min raiška ir maksimali raiška. Medijos užklausos skyros funkcija priklauso skyros duomenų tipui. Tai reiškia, kad raiškos funkciją galima išmatuoti vienu iš trijų vienetų: taškai colyje (dpi), taškai centimetre (dpcm) arba taškai pikselyje (dppx).

Naudojant raiškos funkciją

/* CSS */
@media (min raiška: 72 dpi) {
 p {
 spalva: balta;
 fono spalva: mėlyna;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Mažiausia raiška, kurią gali turėti įrenginys ir vis tiek rodo kokybiškus vaizdus, ​​yra 72 dpi. Taigi, jei įrenginio skiriamoji geba yra 72 dpi ar daugiau, jis savo naršyklėje rodys šią išvestį:

6. Orientavimo funkcija

Įrenginio peržiūros sritis gali turėti tik vieną iš dviejų orientacijų: portretas arba kraštovaizdis. Turėtumėte atkreipti dėmesį, kad peržiūros srities orientacija skiriasi nuo įrenginio orientacijos. Jei įrenginyje naudojama minkštoji klaviatūra, jo peržiūros sritis gali pasikeisti iš stačios į gulsčią, kol pats įrenginys vis dar yra vertikalioje padėtyje.

Naudojant orientavimo funkciją

/* CSS */
 kūnas{
 ekranas: lankstus;
 }
 skyrius{
 kraštinė: 2px vientisa mėlyna;
 paminkštinimas: 3px;
 paraštė: 3 pikseliai;
 }
 @media (orientacija: gulsčias) {
 kūnas {
 lankstumo kryptis: eilė;
 }
 }
@media (orientacija: portretas) {
 kūnas {
 lankstumo kryptis: stulpelis;
 }
 }
 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.

Aukščiau pateiktas kodas pakeičia tinklalapio pagrindo išdėstymą pagal įrenginio orientaciją.

Įrenginyje su peržiūros zona gulsčiojo režimu bus rodomas šis tinklalapis:

Įrenginyje, kurio peržiūros sritis veikia portreto režimu, bus rodomas šis tinklalapis:

7. Aukščio funkcija

Aukščio medijos užklausos funkcija leidžia nurodyti CSS stilių pagal vartotojo įrenginio peržiūros srities aukštį. Ši funkcija palaiko diapazoną, todėl taip pat galite naudoti min aukštis ir maksimalus aukštis raktinius žodžius.

Naudojant aukščio funkciją

 /* CSS */
 @media (min. aukštis: 360 piks.) {
 p{
 kraštinė: 2 pikseliai punktyrine oranžine spalva;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Aukščiau pateiktas kodas pritaiko tai, ką vartotojas mato pagal savo įrenginio aukštį. Naudotojai, kurių įrenginio aukštis yra 360 pikselių ir didesnis, matys kažką panašaus į šį tinklalapį:

Įrenginiuose, kurių aukštis mažesnis nei 360 pikselių, tinklalapio pastraipos kraštinė nebus rodoma.

8. Pločio funkcija

Pločio medijos užklausos funkcija leidžia sukurti konkretų CSS stilių pagal vartotojo įrenginio peržiūros srities plotį. Ši funkcija taip pat palaiko diapazoną, todėl turite galimybę naudoti min pločio ir maksimalus plotis raktinius žodžius.

Naudojant pločio funkciją

 /* CSS */
 @media (min. plotis: 600 piks.) {
 p{
 kraštinė: 2 pikseliai vientisa violetinė;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Aukščiau pateiktas kodas pritaiko tai, ką vartotojas mato pagal įrenginio plotį. Naudotojai, kurių įrenginio plotis yra 600 pikselių ir daugiau, matys kažką panašaus į šį tinklalapį:

Pločiu ir aukščiu pagrįstų medijos užklausų naudojimas gali būti veiksminga strategija kad jūsų svetainė būtų jautri.

9. Spalvos ypatybė

Spalvotos medijos užklausos funkcija įvertina įrenginio spalvų komponentą (raudoną, žalią, mėlyną). Reikšmė nurodo, kiek bitų ekranas naudoja kiekvienam komponentui, o tai apibrėžia, kiek skirtingų spalvų jis gali rodyti. Šiuolaikiniuose įrenginiuose paprastai naudojamas 24 bitų ekranas, kuriame kiekvienam spalvos komponentui naudojami aštuoni bitai. Taip pat reikia sveikojo skaičiaus vertės, kai bespalvis įrenginys yra lygus nuliui.

Spalvų funkcija taip pat naudoja min spalvos ir max spalva diapazonus.

Spalvos funkcijos naudojimas

 /* CSS */
 @media (min. spalva: 7) {
 p{
 kraštinė: 2 pikseliai vientisa žalia;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Įrenginiai, kurių spalvų komponentas yra septyni ir daugiau, savo naršyklėse rodys šią išvestį:

Dabar galite sukurti unikalią vartotojo patirtį

Turėtumėte turėti galimybę naudoti šias išplėstines medijos užklausas, kad pagerintumėte kiekvieno naudotojo, kuris apsilanko jūsų svetainėje ar programoje, patirtį. Svarbu, kad mobiliųjų įrenginių naudotojai ir stalinių kompiuterių naudotojai gautų vienodai teigiamą patirtį svetainėje.

Medijos užklausos nėra vieninteliai CSS įrankiai, galintys sustiprinti jūsų kūrėjo įgūdžius.

8 pagrindiniai CSS patarimai ir gudrybės, kuriuos turėtų žinoti kiekvienas kūrėjas

Skaitykite toliau

Apie autorių