Kuinka kirjoitat CSS-mediakyselyn?

@media -näyttö ja (min-leveys: 1000 kuvapistettä) {}

Tämä on mediakyselyn syntaksi. Se alkaa @media perustaa itse Media-kysely. Määritä seuraavaksi mediatyyppi, joka tässä tapauksessa on -näyttö. Tämä tyyppi koskee pöytätietokoneen näyttöjä, tabletteja, puhelimia jne. Lopeta mediakysely painamalla mediaominaisuus. Yllä olevassa esimerkissämme se on keskileveys: 1000 kuvapistettä. Tämä tarkoittaa, että Media Query käynnistää näytöt, joiden leveys on vähintään 1000 pikseliä.

Lisää näiden mediakyselyn elementtien jälkeen avaava ja sulkeutuva kihara ahdin, joka on samanlainen kuin mitä tekisit missä tahansa normaalissa CSS-säännössä.

Viimeinen vaihe mediakyselyyn on lisätä CSS-säännöt, joita sovelletaan tämän ehdon täyttyessä. Lisää nämä CSS-säännöt Media-kyselyn muodostavien kiharoiden väliin:

 @media -näyttö ja (min-leveys: 1000px) {body {font-size: 20px; }

Kun media kyselyn ehdot täyttyvät (selainikkuna on vähintään 1000 pikseliä leveä), tämä CSS-tyyli tulee voimaan, ja sivustomme kirjasinkoko muuttuu alun perin määrittelemästäsi 16 pikselistä uuteen arvoon 20 pikseliä. 





instagram viewer
 Lisää tyylejä 

Aseta niin monta CSS-säännöt mediakyselyssä tarpeen mukaan verkkosivustosi visuaalisen ulkonäön säätämiseksi. Esimerkiksi, jos haluat paitsi lisätä kirjasinkokoa 20 pikseliin, myös muuttaa kaikkien kappaleiden värin mustaksi (# 000000), lisää tämä: 
@media -näyttö ja (min-leveys: 1000px) {
runko {
fontin koko: 20px;
}
p {
väri: # 000000;
}
}
 Lisää mediakyselyjä 

Lisäksi voit lisätä lisää mediakyselyjä jokaiselle suuremmalle koolle lisäämällä ne tyylisivullesi seuraavasti: 
@media -näyttö ja (min-leveys: 1000px) {
runko {
fontin koko: 20px;
}
p {
väri: # 000000;
{
}
@media -näyttö ja (min-leveys: 1400px) {
runko {
kirjasinkoko: 24 kuvapistettä;
}
}

Ensimmäiset mediakyselyt käynnistyvät 1000 pikselin levyisiksi muuttamalla fonttikokoksi 20 pikseliä. Sitten, kun selain oli yli 1400 pikseliä, fonttikoko muuttuisi jälleen 24 pikseliksi. Lisää niin monta mediakyselyä kuin tarvitset omalle verkkosivustollesi. 
 Pienin ja suurin leveys 

Mediakyselyjä voidaan kirjoittaa yleensä kahdella tavalla - käyttämällä min-leveys tai max-leveys. Toistaiseksi olemme nähneet min-leveyden toiminnassa. Tämä lähestymistapa aktivoi mediakyselyt, kun selain saavuttaa vähintään kyseisen vähimmäisleveyden. Joten kysely, joka käyttää min-leveys: 1000px pätee, kun selaimen leveys on vähintään 1000 pikseliä. Tätä Media Query -tyyliä käytetään, kun rakennat sivustoa ensin mobiililaitteella. 

Jos käytät max-leveys, se toimii päinvastaisella tavalla. Mediakysely "max-width: 1000px" pätee, kun selain on pudonnut alle tämän koon. 

Lainaa tätä artikkelia.