9 Advanced Media Query CSS-temppua, jotka sinun pitäisi tietää

Käyttökelpoinen ja helppokäyttöinen kokemus on onnistuneen verkkosivuston kannalta elintärkeä. Jos lukijoillasi on myönteinen kokemus, he todennäköisemmin toteuttavat toimintakehotuksen, mukaan lukien tuotteiden ostamisen. He myös todennäköisemmin palaavat tai suosittelevat sivustoasi muille. Kokemus on avainasemassa.

Mediakyselyt tarjoavat erilaisia ​​CSS-ominaisuuksia, jotka voivat mukauttaa verkkosivustoasi. Niiden avulla voit räätälöidä jokaisen käyttäjän kokemusta heidän laitteensa ominaisuuksien perusteella. Opi tarjoamaan lukijoillesi paras kokemus riippumatta siitä, käyttävätkö he puhelinta tai suurta työpöytänäyttöä.

1. Osoitinominaisuus

The @mediasääntö on osoitinominaisuus, jonka avulla voit mukauttaa suunnittelua ensisijaisen osoitinlaitteen perusteella. Voit testata saatavuutta ja laatua.

Tämä osoitin mediakyselyominaisuus ottaa yhden kolmesta arvosta: ei mitään, karkea tai hieno. The ei mitään arvoa sovelletaan, kun osoitinlaitetta ei ole. The karkea arvoa sovelletaan, kun ensisijaisen osoitinlaitteen tarkkuus on heikentynyt. Ja

hieno arvoa sovelletaan, kun ensisijaisen osoitinlaitteen tarkkuus on korkea.

Osoitinominaisuuden käyttäminen

Vaihtoehdot joista valita: 
 Vaihtoehto yksi
 Vaihtoehto kaksi

Yllä oleva koodi luo kaksi syöttöradiovaihtoehtoa, jotka vaihtelevat tietokoneen ensisijaisen osoitinlaitteen tarkkuuden mukaan.

Tietokone, jossa on tarkka (tai korkealaatuinen) ensisijainen osoitinlaite, näyttää seuraavan Web-sivun:

Tietokone, jonka ensisijainen laite on rajoitettu tarkkuus (tai heikkolaatuinen), näyttää seuraavan verkkosivun:

Laitteessa, jossa on ensisijainen osoitinlaite, jonka tarkkuus on rajoitettu, on suuremmat valintanapit. Tämä tarjoaa paremman käyttökokemuksen tällaisille käyttäjille. Osoitinominaisuuden avulla voit varmistaa, että kaikilla käyttäjilläsi on miellyttävä kokemus heidän laitteestaan ​​riippumatta.

2. Minkä tahansa osoittimen ominaisuus

Kuten osoitinominaisuus, minkä tahansa osoittimen mediakyselyominaisuus on kohdistettu osoitinlaitteisiin. Kaikki osoitin -ominaisuus kuitenkin arvioi jokaisen tietokoneen osoitinlaitteen. Mikä tahansa osoitin -ominaisuus käyttää myös ei mitään, karkea, ja hieno arvot.

Minkä tahansa osoittimen toiminnon käyttäminen

 @media (mikä tahansa osoitin: hieno) {
 input[type="radio"] {
 leveys: 15px;
 korkeus: 15px;
 reunan säde: 20px;
 reunan leveys: 1px;
 }
 }
@media (mikä tahansa osoitin: karkea) {
 input[type="radio"] {
 leveys: 25px;
 korkeus: 25px;
 reunan säde: 20px;
 reunan leveys: 2px;
 }
 }

Voit yksinkertaisesti korvata yllä olevan koodin koodin mediakyselyosalla osoittimen ominaisuuden esimerkissä. Yllä oleva koodi tuottaa asianmukaisen näytön tietokoneessa mahdollisesti olevien osoitinlaitteiden laadun perusteella.

3. Hover-ominaisuus

Hover-mediakyselyominaisuus arvioi, pystyykö laitteen ensisijainen syöttömekanismi pitämään hiiren osoittimen käyttöliittymän elementtien päällä.

Hover-ominaisuuden käyttäminen

 /* CSS */
 a{
 teksti-koriste: ei mitään;
 väri musta;
 }
 @media (hover: hover) {
 a: hover {
 väri: sininen;
 }
 }
 HTML 
 Linkkielementti

Yllä oleva koodi näyttää an elementti. Se vaihtaa väriä (mustasta siniseksi), kun laitteen ensisijainen syöttömekanismi (joka tukee leijumista) leijuu sen päällä.

4. Kaikki hover -ominaisuus

The mikä tahansa-hover mediakysely kohdistuu mihin tahansa syöttömekanismiin, mukaan lukien ensisijainen syöttömekanismi.

Kaikki hover -ominaisuuden käyttäminen

@media (mikä tahansa-hover: hover) {
 a: hover {
 väri: sininen;
 }
 }

Yllä oleva mediakysely tuottaa hover-tehosteen mille tahansa syöttömekanismille, joka pystyy viemään hiiren elementin päällä.

5. Resoluutioominaisuus

Tarkkuusmediakyselyominaisuus laskee tietyn laitteen näyttämien pikselien määrän. Laitteessa, joka näyttää enemmän pikseleitä tuumalla, on parempi resoluutio, koska se näyttää kuvat yksityiskohtaisemmin. Tämä ominaisuus voi auttaa kehittäjää päättämään, minkä laitteen käyttäjät voivat nähdä käyttöliittymän elementit selkeämmin.

Tarkkuusominaisuus käyttää aluetta. Tämä tarkoittaa, että sekä käyttämällä resoluutio avainsanaa, voit käyttää min-resoluutio ja max-resoluutio. Mediakyselyn tarkkuusominaisuus kuuluu tarkkuustietotyyppiin. Tämä tarkoittaa, että tarkkuusominaisuus on mitattavissa jollakin kolmesta yksiköstä: pistettä tuumalla (dpi), pistettä senttimetrillä (dpcm) tai pistettä pikseliä kohti (dppx).

Resoluutioominaisuuden käyttäminen

/* CSS */
@media (min-resoluutio: 72dpi) {
 p {
 väri valkoinen;
 taustaväri: sininen;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Pienin resoluutio, joka laitteella voi olla ja silti näyttää laadukkaita kuvia, on 72 dpi. Joten jos laitteen resoluutio on 72 dpi tai enemmän, se näyttää selaimessaan seuraavan tulosteen:

6. Suuntausominaisuus

Laitenäkymässä voi olla vain toinen kahdesta suunnasta: muotokuva tai maisema. Huomaa, että näkymän suunta eroaa laitteen suunnasta. Jos laite käyttää pehmeää näppäimistöä, sen näkymä saattaa muuttua pystyasennosta vaakasuuntaiseksi, kun laite itse on edelleen pystyasennossa.

Suuntausominaisuuden käyttäminen

/* CSS */
 body{
 näyttö: flex;
 }
 osio{
 reuna: 2px tasainen sininen;
 täyte: 3px;
 marginaali: 3px;
 }
 @media (suunta: vaaka) {
 body {
 flex-suunta: rivi;
 }
 }
@media (suunta: pysty) {
 body {
 flex-suunta: pylväs;
 }
 }
 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.

Yllä oleva koodi muuttaa verkkosivun asettelua laitteen suunnan mukaan.

Laite, jossa on vaakanäkymä, näyttää seuraavan verkkosivun:

Laite, jossa on kuvaportti pystytilassa, näyttää seuraavan verkkosivun:

7. Korkeusominaisuus

Korkeusmediakyselyominaisuuden avulla voit määrittää CSS-tyylin käyttäjän laitteen näkymän korkeuden perusteella. Tämä ominaisuus tukee kantamaa, joten voit myös käyttää min-korkeus ja max -korkeus avainsanoja.

Korkeusominaisuuden käyttäminen

 /* CSS */
 @media (min-korkeus: 360 kuvapistettä) {
 p{
 reunus: 2px katkoviiva oranssi;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Yllä oleva koodi mukauttaa käyttäjän näkemään laitteensa korkeuden perusteella. Käyttäjät, joiden laitekorkeus on vähintään 360 kuvapistettä, näkevät jotain seuraavan verkkosivun kaltaista:

Laitteet, joiden korkeus on alle 360 ​​pikseliä, eivät näytä reunaa verkkosivun kappaleen ympärillä.

8. Leveysominaisuus

Leveysmediakyselyominaisuuden avulla voit luoda tietyn CSS-tyylin käyttäjän laitteen näkymän leveyden perusteella. Tämä ominaisuus tukee myös kantamaa, joten sinulla on mahdollisuus käyttää min-leveys ja max-leveys avainsanoja.

Leveysominaisuuden käyttäminen

 /* CSS */
 @media (minileveys: 600 kuvapistettä) {
 p{
 reunus: 2px tasainen violetti;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Yllä oleva koodi mukauttaa käyttäjän näkemään laitteensa leveyden perusteella. Käyttäjät, joiden laitteen leveys on vähintään 600 pikseliä, näkevät seuraavan verkkosivun:

Leveys- ja korkeuspohjaisten mediakyselyjen käyttäminen voi olla tehokas strategia tehdä sivustostasi responsiivinen.

9. Väriominaisuus

Värimedian kyselyominaisuus arvioi laitteen värikomponentin (punainen, vihreä, sininen). Arvo viittaa siihen, kuinka monta bittiä näyttö käyttää kullekin komponentille, mikä määrittää kuinka monta eri väriä se voi näyttää. Nykyaikaiset laitteet käyttävät tyypillisesti 24-bittistä näyttöä, joka käyttää kahdeksan bittiä värikomponenttia kohden. Se ottaa myös kokonaisluvun arvon, jossa väritön laite on nolla.

Väriominaisuus käyttää myös min-väri ja max väri vaihteluvälit.

Väriominaisuuden käyttäminen

 /* CSS */
 @media (miniväri: 7) {
 p{
 reuna: 2px tasainen vihreä;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Laitteet, joiden värikomponentti on vähintään seitsemän, näyttävät selaimissaan seuraavan tulosteen:

Nyt voit luoda ainutlaatuisia käyttökokemuksia

Sinun pitäisi pystyä käyttämään näitä edistyneitä mediakyselyitä parantaaksesi jokaisen verkkosivustollasi tai sovelluksessasi vierailevan käyttäjän kokemusta. On tärkeää tarjota mobiili- ja työpöytäkäyttäjille yhtä positiivinen kokemus sivustostasi.

Mediakyselyt eivät ole ainoita CSS-työkaluja, jotka voivat vahvistaa kehittäjätaitojasi.

8 tärkeää CSS-vinkkiä ja temppuja, jotka jokaisen kehittäjän tulisi tietää

Lue Seuraava

Kirjailijasta