Miután befejezte a webalkalmazás stílusának kialakítását, észreveheti, hogy webhelye közel sem olyan szép, ha átállítja a kijelzőt valami nagyobbra vagy kisebbre, például mobileszközökre vagy nagyobb képernyőkre. De hogyan alakítsuk weboldalainkat más méretű eszközökhöz és képernyőkhöz? A válasz a médiakérdésekben rejlik.
Hogyan működnek a médialekérdezések?
Tehát most, hogy tudja, hogy a médialekérdezések segítenek a különböző képernyőméretek kialakításában, felmerülhet a kérdés, hogyan működnek, és milyen nehéz a tanulási görbe. Röviden, a médialekérdezések lehetővé teszik számunkra, hogy a képpontok vagy képernyőméretek egy meghatározott tartományát célozzuk meg, és csak akkor módosítsunk a CSS-ben, ha a képernyő mérete az Ön által kiválasztott képpont-tartományba esik . Egy másodperc múlva visszatérünk ennek működésére, de nem kell aggódni, mert a médialekérdezések tanulási görbéje szinte nem létezik. Ez annak a ténynek köszönhető, hogy a médialekérdezések használata szinte pontosan ugyanaz, mint az egyszerű CSS használata, így a tanulási görbe végső soron attól függ, mennyire ismeri magát a CSS-t.
Különböző méretű képernyők megtekintése a böngészőben
Mielőtt belemerülnénk a médialekérdezések szintaxisába, meg kell beszélnünk, hogyan tekintheti meg webalkalmazását több különböző képernyőméreten. Ha nem tudja, hogyan kell ezt megtenni, egyszerűen kattintson jobb gombbal a képernyőre a webböngészőben, és válassza az ellenőrzés lehetőséget (ezt a Ctrl + Shift billentyűkombináció lenyomásával is megteheti + I). Miután ezt megtette, keresse meg az Eszköztár váltása (Ctrl + Shift + M) lehetőséget.
Itt választhat a gyakori eszközökhöz előre kiválasztott képernyőméretek listájából, valamint beállíthatja saját egyéni képernyőméretét aReszponzívopcióval, amely lehetővé teszi a gépelést. a kívánt pixelmennyiségben a szélességhez és a magassághoz. Ez megváltoztatja a webalkalmazás megjelenítését, így láthatja, hogyan néz ki más eszközökön és képernyőkön.
A Media Query szintaxisának megtekintése
A médialekérdezések szintaxisa meglehetősen egyszerű és könnyen megtanulható. Négy fő célzási funkciót fogunk ma megvizsgálni, de ha részletesebben szeretne olvasni a médialekérdezésekről, itt megteheti:
A médialekérdezések használatának megkezdéséhez egyszerűen írja be a következő kódot egy új sorba:
@media () {
/* Your new CSS changes go here */
}
Ezen a ponton már csak annyit kell tennie, hogy megadja, mikor szeretné, hogy a módosítások életbe lépjenek. Ezt a min-width és max-width célzási funkciók használatával érhetjük el. Ez a legzavaróbb része a médialekérdezések használatának, de minden tőlem telhetőt megteszek, hogy az egyes funkciókat lebontsa, hogy megértse őket, és tudja, mikor mit kell használnia.
min-szélesség
A minimális szélesség célzási funkciójának használatához egyszerűen hozzáadjuk a zárójelek közé a kezdeti médianyilatkozatban, így:
@media (min-width: 1600px) {
/* Your new CSS changes go here */
}
A fenti példában a min-width tulajdonság minden 1600 képpont szélességű képernyőt megcéloz. Ezt úgy is tekintheti, hogy a médialekérdezés által megcélzott minimális képernyőméret 1600 képpont vagy nagyobb, ugyanez a gondolkodásmód érvényes a többi célzási funkcióra is.
max szélesség
A maximális szélesség pont az ellenkezőjét teszi a minimális szélességnek, mivel minden olyan képernyőméretet megcéloz, amely kisebb vagy egyenlő, mint a kiválasztott képpontok száma. A szintaxis ugyanazt a szerkezetet követi.
@media (max-width: 600px) {
/* Your new CSS changes go here */
}
A fenti kód minden 600 képpont szélességű képernyőn lefut. Azt is meg kell jegyezni, hogy használhatja a min-height és max-heighttulajdonságokat is, amelyek pontosan ugyanazt teszik, mint a szélesség tulajdonságok, de helyette magassággal. Ha szeretné látni a médialekérdezéseket működés közben, ez a videó remekül elmagyarázza őket és működésüket.
Adott képernyőméretek célzása
Egy utolsó dolog, amit szeretnék érinteni, ami először kissé megzavart, az az, hogyan célozhatok meg egy adott képernyőméretet. Ezt egy kissé eltérő szintaxissal érhetjük el, ami a következő:
@media (min-width: 767px)and (max-width: 768px) {
/* This will target your specific screen size*/
}
Ezzel a módszerrel olyan képernyőméreteket is megcélozhatunk, amelyek egy bizonyos pixeltartományba esnek. Egyszerűen állítsa be a minimális és maximális értékeket a kívánt méretre, hogy a médialekérdezések bizonyos eszközökre hatással legyenek. Remélhetőleg ez a cikk segít jobban megérteni a médialekérdezéseket és működésüket.
Források:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://ilovecoding.org/courses/random/lesssons/media-query-what-makes-responsive-design-possible
