Hogyan működnek a média lekérdezések a…

A médialekérdezések lehetővé teszik bizonyos CSS-stílusok alkalmazását a készülék vagy a nézetterület jellemzői alapján. Ezeket arra használják, hogy olyan reszponzív kialakítást hozzanak létre, amely különböző képernyőkön, például mobil eszközökön, tableteken és asztali számítógépeken is helyesen jelenik meg.

A médialekérdezés fő szintaxisa:

@media <média_típus> and (<kifejezés>) {
  /* CSS-szabályok */
}

<média_típus> meghatározza, hogy melyik eszköztípusra vonatkozik a lekérdezés (például screen, print, all).
<kifejezés> feltételeket határoz meg, amelyek mellett alkalmazódnak a stílusok (például szélesség, magasság, képernyőorientáció, felbontás).

Népszerű kifejezések a reszponzív tervezéshez:

min-width: A stílusok akkor alkalmazódnak, ha a nézetterület szélessége megegyezik vagy nagyobb a megadott értéknél.
max-width: A stílusok akkor alkalmazódnak, ha a nézetterület szélessége megegyezik vagy kisebb a megadott értéknél.
orientation: A stílusok a képernyő orientációjától függően alkalmazódnak (portrait vagy landscape).
resolution: A stílusok a képernyő felbontásától függően alkalmazódnak.

Példa a max-width használatára mobil eszközökön:

/* Alapértelmezett stílusok */
body {
  font-size: 16px;
}

/* 768px-ig terjedő szélességű képernyők esetén */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Példa a min-width használatára asztali gépeken ("mobil első" megközelítés):

/* Mobil alapértelmezett stílusok */
.column {
  width: 100%;
}

/* 992px-től nagyobb szélességű képernyők esetén */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Az and, or (a médialekérdezésekben az or vesszővel írjuk) és not operátorok kombinálása:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Csak tabletek esetén */
}

@media screen and (orientation: landscape), print {
  /* Tájolás szerint és nyomtatás esetén */
}

A viewport meta-tag fontos a mobil eszközökön a médialekérdezések helyes működéséhez:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width beállítja a nézetterület szélességét a készülék szélességére.
initial-scale=1.0 beállítja az alapértelmezett nagyítást.

Meta-tag nélkül sok mobil böngésző alapértelmezés szerint nagyítja az oldalt, figyelmen kívül hagyva a valódi készülékhosszt, ami rontja a reszponzivitást.

Hogyan működnek a média lekérdezések a webfejlesztésben az adaptív kialakítás érdekében, beleértve az okostelefonokat is?