responsiivisen web-suunnittelun toteuttamiseksi on tärkeää ymmärtää median kyselyt CSS: ssä, erityisesti vain median ja median Näytön kyselyt.

aloitetaan ilmeisellä kysymyksellä.

mikä on mediakysely?

mediakysely on tekniikka, joka otettiin käyttöön CSS3: ssa. Kyselyssä käytetään @media-sääntöä CSS-ominaisuuksien lohkon ajamiseen siinä tapauksessa, että ennalta määrätty ehto on totta.

esimerkiksi alla oleva koodi määrää, että jos selainikkuna on 400px tai vähemmän, taustaväri on vaaleanvihreä:

@media only screen and (max-width: 400px) {
body {
Background-color: lightgreen;
}
}

mediakyselyt ovat erityisen hyödyllisiä lisättäessä keskeytyspisteitä reagoivaa suunnittelua varten. Koska keskeytyspisteet ovat lähinnä pikselilukuja, joissa sisältö tai rakenne näyttäytyy käyttäjille eri tavalla, mediakyselyillä määritellään, mitä muutoksia missäkin pikselissä tulee tapahtua.

alla olevassa esimerkissä koodi ohjaa, että jos selainikkuna pienenee alle 600px, jokaisen sarakkeen leveydeksi tulee 100%:

/* työpöydälle: * /
.col-1 {width: 8,33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41,66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 600px) {
/* matkapuhelimille: */
{
width: 100%;
}
}

jokainen mediakysely koostuu valinnaisesta mediatyypistä ja yhdestä tai useammasta mediatoiminnon ilmaisusta. On mahdollista yhdistää useita mediakyselyitä loogisiin operaattoreihin. Kaikki median kyselyt ovat kirjainlyhenteisiä.

jokainen mediakysely katsotaan todeksi, kun määritetty mediatyyppi vastaa laitteita, joilla verkkosivusto näytetään. Lisäksi median ominaisuusilmaisujen on myös oltava tosia.

mikä on median ruutukysely?

@media screen-kysely tarkoittaa yksinkertaisesti sitä, että kyseinen kysely on tarkoitettu värinäytöille tai laitteille, jotka tukevat ”screen” – tilaa.

otetaan esimerkki:

@medianäyttö ja (max-width:500px)

yllä oleva kysely koskee näyttöjä, joiden maksimileveys on 500 pikseliä. Tämän tarkoituksena on lähinnä ohjata koodi erottamaan ”näyttö” muista mediatyypeistä (kuten painatus, pistekirjoitus, kohokuvioitu, kädessä pidettävä jne.).

mikä on vain median kysely?

lisäämällä mediakyselyyn loogisen operaattorin ”vain” Kehittäjä varmistaa, että kyselyä sovelletaan vain, jos koko ehto vastaa. Jos et käytä vain, vanhemmat selaimet eivät välttämättä lue tai tulkitse kaikkia mediatoiminnon ilmaisuja. Esimerkiksi jos kysely on

@medianäyttö ja (max-width:500px)

vanhemmat selaimet voivat tulkita kyselyn pelkäksi näytöksi ja jättää pikselimäärän huomiotta. Tämä johtaisi kyselyehdon soveltamiseen kaikilla näytöillä. Voit estää tämän käyttämällä:

@media only screen and (max-width:500px)

kun käytät ainoaa operaattoria, muista määrittää mediatyyppi.

merkitys responsiivisessa suunnittelussa

mediakyselyt ovat avainasemassa responsiivisen web-suunnittelun toteuttamisessa. Edellä mainitut kyselyt ovat kaksi yleisimmin käytettyä, ja ne auttavat varmistamaan, että verkkosivustosi sisältö on optimoitu laitteen kokoille ja tyypeille.

kun olet käyttänyt CSS-kyselyjä verkkosivustollasi, varmista niiden tehokkuus. Helpoin tapa tehdä tämä on käyttää työkalua, jonka avulla voit testata sivuston suunnittelua oikeilla laitteilla ja selaimilla. On olemassa useita työkaluja helpottaa tätä, mutta vie aikaa löytää reagoiva checker verkossa, joka antaa sinulle mahdollisuuden testata riittävän monenlaisia laitteita — sekä työpöydälle ja mobiililaitteille.