Kako pišete CSS medijski upit?

Zaslon @media i (min-širina: 1000px) {}

Ovo je sintaksa medijskog upita. Počinje sa @media uspostaviti sam medijski upit. Zatim postavite vrstu medija, što je u ovom slučaju zaslon. Ova vrsta odnosi se na zaslone stolnih računala, tablete, telefone itd. Završite upit za medije s medijska značajka. U našem gornjem primjeru, tj srednja širina: 1000 piksela. To znači da se Media Query uključuje za zaslone širine najmanje 1000 piksela.

Nakon ovih elemenata medijskog upita dodajte početnu i završnu kovrčavu zagradu sličnu onoj što biste radili u bilo kojem uobičajenom CSS pravilu.

Posljednji korak za medijski upit je dodavanje CSS pravila koja će se primijeniti nakon što se ispuni ovaj uvjet. Umetnite ova CSS pravila između kovrčavih zagrada koje čine Medijski upit, ovako:

 Zaslon @media i (min-širina: 1000px) {body {font-size: 20px; }

Kada su ispunjeni uvjeti za medijski upit (prozor preglednika je širok najmanje 1000 piksela), ovaj CSS stil stupa na snagu, mijenjajući veličinu fonta na našoj web lokaciji sa 16 piksela koje smo prvotno uspostavili na našu novu vrijednost 20 piksela. 





instagram viewer
 Dodavanje više stilova 

Smjestite što više CSS pravila unutar ovog medijskog upita po potrebi za prilagodbu vizualnog izgleda vašeg web mjesta. Na primjer, da ne samo da povećate veličinu fonta na 20 piksela, već i promijenite boju svih odlomaka u crnu (# 000000), dodajte ovo: 
zaslon @media i (min-širina: 1000px) {
tijelo {
veličina slova: 20px;
}
p {
boja: # 000000;
}
}
 Dodavanje dodatnih medijskih upita 

Uz to, možete dodati još medijskih upita za sve veće veličine, umetajući ih u svoj list stilova ovako: 
zaslon @media i (min-širina: 1000px) {
tijelo {
veličina slova: 20px;
}
p {
boja: # 000000;
{
}
zaslon @media i (minimalna širina: 1400px) {
tijelo {
veličina fonta: 24px;
}
}

Prvi medijski upiti pokreću se širinom od 1000 piksela, mijenjajući veličinu fonta na 20 piksela. Tada bi se, kad bi preglednik bio iznad 1400 piksela, veličina fonta opet promijenila na 24 piksela. Dodajte onoliko medijskih upita koliko je potrebno za vašu web lokaciju. 
 Minimalna širina i maksimalna širina 

Općenito postoje dva načina za pisanje medijskih upita - pomoću min-širina ili sa maksimalna širina. Do sada smo vidjeli min-širinu na djelu. Ovaj pristup aktivira medijske upite nakon što preglednik dosegne barem tu minimalnu širinu. Dakle, upit koji koristi minimalna širina: 1000 piksela primjenjuje se kada je preglednik širok najmanje 1000 piksela. Ovaj stil Media Query koristi se kada web stranicu izrađujete na mobilni način. 

Ako koristite maksimalna širina, radi na suprotan način. Medijski upit "max-width: 1000px" primjenjuje se nakon što preglednik padne ispod ove veličine. 

Navedite ovaj članak.