Kaip rašyti CSS medijos užklausą?

„@media“ ekranas ir (min. plotis: 1000 taškų) {}

Tai yra medijos užklausos sintaksė. Tai prasideda nuo @media nustatyti pačią „Media Query“. Tada nustatykite laikmenos tipą, kuris šiuo atveju yra ekranas. Šis tipas taikomas stalinių kompiuterių ekranams, planšetiniams kompiuteriams, telefonams ir kt. Užbaikite medijos užklausą naudodami žiniasklaidos funkcija. Mūsų aukščiau pateiktame pavyzdyje tai yra vidurio plotis: 1000 taškų. Tai reiškia, kad „Media Query“ pradeda rodyti mažiausiai 1000 pikselių pločio ekranus.

Po šių medijos užklausos elementų pridėkite atidarymo ir uždarymo garbanotąjį petnešą, panašią į tai, ką darytumėte bet kurioje įprastoje CSS taisyklėje.

Paskutinis medijos užklausos žingsnis - pridėti CSS taisykles, kurios bus taikomos įvykdžius šią sąlygą. Įterpkite šias CSS taisykles tarp garbanotųjų petnešų, sudarančių medijos užklausą, taip:

 @media ekranas ir (min-width: 1000px) {body {font-size: 20px; }

Kai laikomasi medijos užklausos sąlygų (naršyklės langas yra mažiausiai 1000 taškų pločio), šis CSS stilius įsigalios, pakeisdami mūsų svetainės šrifto dydį iš 16 nustatytų taškų iš pradžių į naują mūsų 20 reikšmę pikselių. 
 Pridėti daugiau stilių 

Vieta kuo daugiau CSS taisyklės pagal šią medijos užklausą, jei norite pakoreguoti savo svetainės vizualinę išvaizdą. Pvz., Norėdami ne tik padidinti šrifto dydį iki 20 taškų, bet ir pakeisti visų pastraipų spalvą į juodą (# 000000), pridėkite tai: 
„@media“ ekranas ir (min. plotis: 1000 taškų) {
kūnas {
šrifto dydis: 20 taškų;
}
p {
spalva: # 000000;
}
}
 Pridedama daugiau medijos užklausų 

Be to, galite pridėti daugiau medijos užklausų kiekvienam didesniam dydžiui, įterpdami juos į savo stilių lapą taip: 
„@media“ ekranas ir (min. plotis: 1000 taškų) {
kūnas {
šrifto dydis: 20 taškų;
}
p {
spalva: # 000000;
{
}
„@media“ ekranas ir (min. plotis: 1400 piks.) {
kūnas {
šrifto dydis: 24 taškų;
}
}

Pirmosios medijos užklausos prasideda 1000 taškų pločiu, pakeičiant šrifto dydį į 20 taškų. Tada, kai naršyklė viršys 1400 taškų, šrifto dydis vėl pasikeis į 24 taškus. Pridėkite tiek medijos užklausų, kiek reikia jūsų konkrečiai svetainei. 
 Min. Plotis ir maks. Plotis 

Paprastai yra du būdai, kaip rašyti medijos užklausas - naudojant min pločio arba su maks. plotis. Iki šiol matėme min-plotį. Šis metodas suaktyvina medijos užklausas, kai naršyklė pasiekia bent tą minimalų plotį. Taigi užklausa, kuri naudoja min. plotis: 1000 taškų taikoma, kai naršyklė yra mažiausiai 1000 taškų pločio. Šis „Media Query“ stilius naudojamas, kai kuriate svetainę pirmiausia mobiliesiems. 

Jei naudosite maks. plotis, jis veikia priešingai. Medijos užklausa „max-width: 1000px“ taikoma tada, kai naršyklė nukrenta žemiau šio dydžio. 

Cituokite šį straipsnį.