Hogyan írhat CSS média lekérdezést?

@media képernyő és (min-szélesség: 1000px) {}

Ez a Media Query szintaxisa. Azzal kezdődik @média hogy létrehozza magát a Media Query-t. Ezután állítsa be a hordozótípust, amely ebben az esetben az képernyő. Ez a típus az asztali számítógép képernyőire, táblagépeire, telefonjaira stb. Vonatkozik. Zárja le a média lekérdezést a média funkció. A fenti példánkban ez az közepes szélesség: 1000 képpont. Ez azt jelenti, hogy a Media Query legalább 1000 pixel szélességű kijelzőkre indul.

A Media Query ezen elemei után adjon hozzá egy nyitó és záró göndör zárójelet, hasonlóan ahhoz, amit bármilyen normális CSS-szabály esetén tennénk.

A média lekérdezés utolsó lépése a CSS-szabályok hozzáadása a feltétel teljesülése után. Helyezze be ezeket a CSS-szabályokat a Media lekérdezést alkotó göndör zárójelek közé, így:

 @media képernyő és (min-width: 1000px) {body {font-size: 20px; }





instagram viewer

Ha a Media Query feltételei teljesülnek (a böngészőablak legalább 1000 pixel széles), akkor ez a CSS stílus lép életbe, megváltoztatva webhelyünk betűméretét az eredetileg létrehozott 16 képpontról az új 20-as értékre pixel. 
 További stílusok hozzáadása 

Helyezzen annyit CSS szabályok ebben a média lekérdezésben szükség szerint módosíthatja webhelye vizuális megjelenését. Például, ha nem csak a betűméretet szeretné növelni 20 képpontra, hanem az összes bekezdés színét is feketére (# 000000) változtatja, adja hozzá ezt: 
@media képernyő és (min-szélesség: 1000px) {
body {
betűméret: 20px;
}
p {
szín: # 000000;
}
}
 További média lekérdezések hozzáadása 

Ezenkívül további média lekérdezéseket adhat hozzá minden nagyobb mérethez, és így illesztheti be ezeket a stíluslapba: 
@media képernyő és (min-szélesség: 1000px) {
body {
betűméret: 20px;
}
p {
szín: # 000000;
{
}
@media képernyő és (min-width: 1400px) {
body {
betűméret: 24 képpont;
}
}

Az első Media Queries 1000 pixel szélességűre vált, a betűméretet 20 pixelre változtatva. Aztán, ha a böngésző 1400 képpont fölött van, a betűméret ismét 24 képpontra változik. Adjon hozzá annyi média lekérdezést, amennyi az adott webhelyéhez szükséges. 
 Min-Width és Max-Width 

A média lekérdezéseket általában két módon lehet megírni - a használatával min-szélesség vagy azzal max szélesség. Eddig min-szélességet láttunk működés közben. Ez a megközelítés aktiválja a média lekérdezéseket, miután egy böngésző eléri legalább ezt a minimális szélességet. Tehát egy lekérdezés, amely használja min-szélesség: 1000px akkor érvényes, ha a böngésző legalább 1000 pixel széles. A Media Query ezt a stílust akkor használja, ha webhelyet épít először mobilalkalmazással. 

Ha használja max szélesség, éppen ellenkezőleg működik. A "max-width: 1000px" média lekérdezés érvényes, miután a böngésző aláesett ennél a méretnél. 

Idézd ezt a cikket.