Kas saaksite selgitada media query tööpõhimõtet veebiarenduses?

Media query — on CSS-mehhanism, mis võimaldab rakendada erinevaid stiile sõltuvalt seadme või brauseri akna omadustest, näiteks ekraani laius, orientatsioon, resolutsioon ja muud parameetrid.

Veebiarenduses kasutatakse media query't, et luua reageeriv disain, tagamaks, et sait kuvatakse õigesti erinevatel seadmetel — mobiiltelefonidest suurte monitorideni.

Näide media query'st, mis muudab tausta värvi, kui ekraani laius on väiksem kui 600px:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Flutteris, kuigi media query on veebist pärit termin, on olemas sarnane klass MediaQuery, mis võimaldab saada teavet ekraani suuruse ja teiste seadmeparameetrite kohta, et luua reageeriv kasutajaliides.