a reszponzív webdesign megvalósítása érdekében fontos megérteni a Média lekérdezéseket a CSS-ben, különösen a csak a média és a média képernyő lekérdezésekben.

kezdjük a nyilvánvaló kérdéssel.

mi a Média lekérdezés?

a Média lekérdezés olyan technika, amelyet a CSS3-ban vezettek be. A lekérdezés magában foglalja a @ media szabály használatát a CSS tulajdonságok blokkjának futtatásához abban az esetben, ha egy előre meghatározott feltétel igaz.

például az alábbi kód azt diktálja, hogy ha a böngészőablak 400px vagy annál kisebb, akkor a háttérszín Világoszöld lesz:

@csak a Média képernyője és (max-szélesség: 400px) {
Test {
háttérszín: lightgreen;
}
}

a média lekérdezések különösen hasznosak töréspontok hozzáadásával az érzékeny tervezéshez. Mivel a töréspontok lényegében olyan képpontszámok, amelyeken a tartalom vagy a formatervezés másképp jelenik meg a felhasználók számára, a Média lekérdezéseit használják annak meghatározására, hogy milyen változásoknak kell bekövetkezniük a képpontokban.

az alábbi példában a kód azt irányítja, hogy ha a böngészőablak 600px alá csökken, akkor minden oszlopszélességnek 100% – nak kell lennie:

/* az asztalon: */
.col-1 {szélesség: 8,33%;}
.col-2 {Szélesség: 16,66%;}
.col-3 {szélesség: 25%;}
.col-4 {szélesség: 33,33%;}
.col-5 {Szélesség: 41,66%;}
.col-6 {Szélesség: 50%;}
.col-7 {szélesség: 58,33%;}
.col-8 {szélesség: 66,66%;}
.col-9 {szélesség: 75%;}
.col-10 {Szélesség: 83,33%;}
.col-11 {szélesség: 91,66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 600px) {
/* For mobile phones: */
{
width: 100%;
}
}

minden média lekérdezés opcionális médiatípusból és egy vagy több médiafunkció-kifejezésből áll. Lehetőség van több média lekérdezés kombinálására logikai operátorokkal. Minden média lekérdezések eset-érzékeny.

minden média lekérdezés akkor tekinthető igaznak, ha a megadott médiatípus megegyezik azokkal az eszközökkel, amelyeken a weboldal megjelenik. Ezenkívül a media feature kifejezéseknek is igaznak kell lenniük.

mi a média-képernyő lekérdezés?

a @ media screen lekérdezés egyszerűen azt jelenti, hogy a kérdéses lekérdezés a “képernyő” módot támogató színes képernyőkre vagy eszközökre vonatkozik.

Vegyünk egy példát:

@media screen and (max-width: 500px)

a fenti lekérdezés az 500 pixel maximális szélességű képernyőkre vonatkozik. Ennek lényege elsősorban az, hogy a kódot a “képernyő” és más médiatípusok (például nyomtatás, braille-írás, dombornyomott, kézi stb.).

mi a csak Média lekérdezés?

a logikai operátor “csak” hozzáadásával a Média lekérdezéshez a fejlesztő biztosítja, hogy a lekérdezés csak akkor kerüljön alkalmazásra, ha a teljes feltétel megegyezik. Ha nem csak, a régebbi böngészők nem olvashatják vagy értelmezhetik az összes médiafunkció kifejezést. Ha például a lekérdezés

@media screen és (max-width:500px)

régebbi böngészők a lekérdezést csak képernyőként értelmezhetik, és figyelmen kívül hagyhatják a képpontszámot. Ez a lekérdezési feltétel alkalmazásához vezetne minden képernyőn. Ennek megakadályozásához használhatja:

@media only screen and (max-width:500px)

az egyetlen operátor használatakor feltétlenül adja meg a média típusát.

jelentősége reszponzív tervezés

média lekérdezések fontos szerepet végrehajtási reagáló web design. A fent tárgyalt lekérdezések a két leggyakrabban használt kérdés, amelyek segítenek annak biztosításában, hogy webhelyének tartalma optimalizálva legyen az eszközméretekhez és típusokhoz.

miután CSS lekérdezéseket használt a webhelyén, ellenőrizze azok hatékonyságát. Ennek legegyszerűbb módja egy olyan eszköz használata, amely lehetővé teszi a weboldal tervezésének tesztelését valódi eszközökön és böngészőkön. Számos eszköz van ennek megkönnyítésére, de szánjon időt arra, hogy megtalálja az online érzékeny ellenőrzőt, amely lehetőséget ad arra, hogy kellően sokféle eszközön — mind asztali, mind mobil eszközön-tesztelje.