Kako napišem medijsko poizvedbo CSS?

zaslon @media in (najmanjša širina: 1000 slikovnih pik) {}

To je sintaksa medijske poizvedbe. Začne se z @media za vzpostavitev same medijske poizvedbe. Nato nastavite vrsto medija, kar je v tem primeru zaslon. Ta vrsta velja za zaslone namiznih računalnikov, tabličnih računalnikov, telefonov itd. Medijsko poizvedbo končajte z medijska funkcija. V našem zgornjem primeru, tj srednja širina: 1000 slikovnih pik. To pomeni, da se Media Query prične za zaslone s širino najmanj 1000 slikovnih pik.

Po teh elementih medijske poizvedbe dodajte odpiralni in zapiralni zaviti oklepaj, podobno kot bi to storili v običajnem pravilu CSS.

Zadnji korak k medijski poizvedbi je dodati pravila CSS, ki bodo veljala po izpolnitvi tega pogoja. Ta pravila CSS vstavite med zavite oklepaje, ki sestavljajo poizvedbo o medijih, takole:

 zaslon @media in (najmanjša širina: 1000px) {body {velikost pisave: 20px; }





instagram viewer

Ko so izpolnjeni pogoji za medijsko poizvedbo (okno brskalnika je široko vsaj 1000 slikovnih pik), je ta slog CSS začne veljati in spremeni velikost pisave našega spletnega mesta s 16 slikovnih pik, ki smo jih prvotno določili, na novo vrednost 20 slikovnih pik. 
 Dodajanje več stilov 

Postavite toliko Pravila CSS v tej medijski poizvedbi, kot je potrebno za prilagoditev vizualnega videza vašega spletnega mesta. Če na primer ne samo povečate velikost pisave na 20 slikovnih pik, temveč tudi spremenite barvo vseh odstavkov v črno (# 000000), dodajte to: 
zaslon @media in (najmanjša širina: 1000px) {
telo {
velikost pisave: 20px;
}
p {
barva: # 000000;
}
}
 Dodajanje več medijskih poizvedb 

Poleg tega lahko za vse večje velikosti dodate več medijskih poizvedb, ki jih vstavite v tabelo slogi, kot je ta: 
zaslon @media in (najmanjša širina: 1000px) {
telo {
velikost pisave: 20px;
}
p {
barva: # 000000;
{
}
zaslon @media in (najmanjša širina: 1400px) {
telo {
velikost pisave: 24 slikovnih pik;
}
}

Prve medijske poizvedbe se začnejo s širino 1000 slikovnih pik in spremenijo velikost pisave na 20 pik. Ko bi brskalnik presegel 1400 slikovnih pik, bi se velikost pisave spet spremenila na 24 slikovnih pik. Dodajte toliko medijskih poizvedb, kolikor je potrebno za vaše spletno mesto. 
 Najmanjša širina in največja širina 

Medijska poizvedba na splošno obstaja na dva načina - z uporabo najmanjša širina ali s največja širina. Do zdaj smo videli min-širino v akciji. Ta pristop aktivira predstavnostne poizvedbe, ko brskalnik doseže vsaj to najmanjšo širino. Torej poizvedba, ki uporablja najmanjša širina: 1000px velja, če je brskalnik širok vsaj 1000 slikovnih pik. Ta slog Media Query se uporablja, ko spletno mesto gradite na mobilni način. 

Če uporabljate največja širina, deluje obratno. Medijska poizvedba »max-width: 1000px« velja, ko brskalnik pade pod to velikost. 

Navedite ta članek.